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has his tutorials powered by Heart Internet 


HostReview 
BEST RESELLER 


Bring your ideas to life with our award-winning hosting platform 


Heart Internet provides the tools you need to achieve your full potential online. Whether you have a 
resource-intensive website or want a hassle-free way to host all your customers; you will benefit from the speed, 
reliability and security that is guaranteed by Heart Internet. And it’s all backed by expert support around the clock. 


Hosting built by experts, powered by your imagination 
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BABICH 


In this month's cover feature, Nick, 
a software developer with a love of 
all things UX, reveals his top tips for 
creating great mobile content. Head 
to page 68 to get started 

w: babich.biz 

t: @101babich 
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WELCOME 


EDITOR'S NOTE 


Welcome to issue 292 of net magazine, 
brought to you from its brand-new home in 


Bournemouth on the UK’s south coast. Bournemouth 


has the fastest-growing digital economy in the UK, 
and so it seems like a match made in heaven with 
the world’s favourite web design publication. 

A big thanks to Ruth Hamilton for looking after 
the mag for the last few issues, and making sure 
the handover to our new team went as smoothly as 
possible. We'll strive to continue the brilliant work 
by making every issue of net the best it can be. 
We’ll seek only the essential topics and be sure to 
commission experts at the top of their field. Long 
may net magazine be the voice of web design. 


And with that in mind, issue 292 is packed 
with all the good stuff you’ve come to expect. Our 
cover feature, Master Mobile Design, reveals the 
golden rules behind great mobile UX (page 68). 
Software developer Nick Babich’s must-read guide 
explains how to create great mobile apps. We’re 
also showcasing 15 web APIs still in beta set to 
revolutionise the web (page 76) and giving you 26 
pages of expert tutorials, including a brilliant guide 
to writing superfast CSS. Hopefully you’ll enjoy the 
issue as much as we enjoyed putting it together. 


Philip Morris, Editor 
@philipmorris8 


FEATURED AUTHORS 


PHILIP 
ACKERMANN 


web APIs you've never heard of. 
They're still in beta but head to 
page 76 to discover why they will 
change web design forever 

w: philipackermann.de 

t: @cleancoderocker 


We tasked Philip with investigating 


JEREMY 
WAGNER 


MAX 
IGNATYEV 


The CSS you write can quickly 
get bloated. Turn to page 98 to 
see Jeremy's guide to getting 
superfast CSS and improving 
your page-rendering speeds 
w: jeremywagner.me 

t: @malchata 


w: sympli.io 
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Max is the CTO and founder of 
Sympli so who better to show us 
around the new design 
collaboration tool. Check out why 
it's so good over on page 90 


t: @maksimlgnatyev 


Future PLC, Richmond House, 33 Richmond Hill, Bournemouth, BH2 6EZ +44 (0)1202 586200 
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NEW 
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become one — even if it 
might ruin your life! 
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for a great mobile user experience 
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Senongo Akpem 
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classic typography effort 
m= from Stupid Studio 
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Philip Ackermann looks at APIs still in 
beta that will change the web forever 
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CONTACT US 


@netmag 


/netmag 


netmag@futurenet.com 


net.creativebloq.com 


NETWORK 


medium.com/net- magazine 


BEHIND THE 
ILLUSTRATION 
Often in illustration we 
are asked to visualise the 
abstract... whether it’s a 
feeling, a far away future or 
a new concept. This month’s 
commission was no different 
— how best to communicate 
the 15 modern APIs we need 
to keep an eye on? The idea 
came very quickly to me but 
required a little fleshing out. 
What if there was a 
technological crystal ball that 
allowed us to see into the 
future? What if it cut through 
all the noise and showed us 
the essential tools that we 
will need, without having to 
sift through all the stuff we 
don’t. I love testing myself 
with new illustrative styles 
and this piece is no different. 
I wanted to keep the look and 
feel very flat and geometric, 
whilst adding a sense of depth 
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with simple hatching and 
gradient fills. The crystal ball 
is a combination of built-up 
layers and a simple gradient 
mesh. And the enclosed 
isometric cube was used as 

a way of marrying together 
the background elements 
with the foreground whilst 
also tackling the tricky idea 
of visualising APIs. The 
mechanism inside the ball’s 
base hints at something more 
than magic and the cabling 
running to the article’s title 
aim to show the reader that 
net magazine knows exactly 
what you need. 

Lastly, I wanted the colours 
to feel very primary and to 
pop off the dark background. I 
really wanted the ball to draw 
the eye of the reader and to 
get them asking questions 


— questions that the article 
undoubtedly answers. 
Marcus Faint, Bath, UK 


vy 
AGENCY vs 
IN-HOUSE 
After working in agencies 
for years I recently chose to 
move to an in-house role. My 
main reasons were to have a 
stronger focus on quality of 
work and working towards the 
best results for the business, 
regardless of time or budget. 
Whilst I found agency 
work full of variety, the level 
of quality for the project 
deliverable is ultimately, 
understandably, determined 
by timeframes and client 
budgets. This means the 
quality of the work is 
sometimes compromised and 


Work in progress Here's a behind-the-scenes look at how Marcus Faint went 
about creating his first net magazine illustration 


isn’t always the best or the 
most fit for purpose. Further 
to this, agency projects are 
often shorter term where 
revisiting projects is less 
likely. This can mean 

more emphasis is placed on 
project turnaround, instead of 
quality or scalability. This can 
be the case for both design 
and development. 
@ashconnolly 


net: This is brilliantly put, 
Ash. It’s a fine balance to 
find, but there are positives 
to both sides. Good luck! 


 f 
GAME-CHANGING 
DEVELOPMENTS 

net: While Java still is, and 
probably will remain, a 
staple technology, it now 
faces more competition than 
ever. We looked at four of 
the most game-changing 
developments in tech at 
netm.ag/bloq-292 and here’s 
one comment and a blog that 
we found a really interesting 
read. Thanks for sharing 
with us, Stephen! 


I think the rise of AI will 
fundamentally change the 
customer-service industry 

in the next few years. I have 
written an article on this 
subject that people might find 
of interest: netm.ag/AI-292. 
Stephen Garside 


WHICH STATEMENT BEST DESCRIBES 


YOUR THOUGHTS ON CHATBOIS? 


My clients are 

asking for them, so 

I'm implementing 
them 


As long as they don't 
pretend to be human, 
they can be useful 


They are eroding user 
trust and causing 
frustration 


Right now they're 
causing problems, 
but in the future 
they'll be very 
effective 


They will be a big 
part of the web’s 
future 


They are a fad that 
will pass 


wW From our timeline 


8am till 4pm the next 
=m day. Few hour breaks in 
’ between. At that point | 


decided major last minute 
changes are no longer tolerated. 


ee Last minute University 
* Final Year Project, 48 
hours of PHP. 


ra \ 2 straight days ona QA 
team making sure 
domain registration 


processes worked across reseller 
sites. Horrible. 


€_ _ & 30+ hours to get 3rd 

| ® year group project done. 
Eating hot cross buns in 

the corridor (no food or drink in 

the labs) at 4am for fuel. 


BM 26 hours pushing, 
F testing and finishing a 
site for a well known UK 
holiday firm. Many last minute 


“changes”. #badtimes 
agencywork 


we 7yrs ago a freelancer 


didn't deliver. Built the 

app from scratch in 18 
hrs straight. At the time it didn’t 
seem as mad as it does now. 


> Finishing the final part 
of a project after pulling 


a 100+ hour week on 
top of a pallet of dog food. 


f~\ 56 straight hours. Done 


without any energy 
drinks or caffeine. 


COOL STUFF 
WE LEARNED 
THIS MONTH 


LOSSLESS WEB 
NAVIGATION WITH TRAILS 
A team at Mozilla 
® are working ona 
project to evolve the model 
of tabbed browsing into 
something that preserves 
information about how you 
got from one page to the 
next via a ‘trail! The aim 
is to make the browser 
into a tool that “enhances 
our cognitive process, 
rather than increasing our 
cognitive load” 
netm.ag/trails-292 


DO WE NEED A NEW 
HEADING ELEMENT? 


+ Jake Archibald 
discusses the 


prospect of a <h> element, 
which would have some 
benefits around making 
headings portable within 
your document. If you've 
ever wondered why it’s so 
difficult to get such things 
implemented, this article 
and discussion provides an 
interesting insight. 
netm.ag/heading-292 


WHAT'S AMP? 

Episode 248 of 
e ShopTalk Show is 
all about AMP, the open 
source web components 
format and library led 
by a collective of Google 
employees. The show 
explains exactly what AMP 
is, what it can do for you 
and a general discussion of 
whether AMP is a force for 
good or evil. 
netm.ag/show-292 
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EXCHANGE 


netmag@futurenet.com 


THIS MONTH FEATURING... 
SURAJ KIKA 


Suraj is founder and group 
(as CEO of Jadu, a global 
content management 
a system provider 
ie, w: jadu.net 


t: @surajkika 


SYD LAWRENCE 


Syd is CEO and co-founder 
of The Bot Platform, a 
platform for building bots 
on Messenger 

w: Thebotplatform.com 


t: @sydlawrence 
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What do you think the limitations of 
chatbots will be? 


Ben Nipper, Lincoln 


GW2435 = 


m2 he hagrewg of yas com 


Problem solvers Chatbots are useful, but they shouldn't be confused with artificial intelligence, which we're 
still a long way away from 


SL: Even though I’m the CEO and co-founder of The Bot Platform, I’m not a ‘hyper’; I 
don’t think we’ re on the verge of bots taking over. I also don’t think we’re even at a 
point where AI is useful in these situations; I believe we’re far from a machine passing 
the Turing test. I’m not saying it will never happen, but we’re years away from it. 
What I will say is that there are some really excellent uses of bots right now — 
especially messaging bots - whether it’s automated responses, simply accessing data 
or performing tasks. These things are great. But chatting with them? Nah. 


CHATBOTS 

ARTIFICIAL INTELLIGENCE 
Why haven’t I seen any good chatbots? 
Jane Williamson, Leeds 

SL: I’m really pleased you asked 


that question. See, here’s acommon 
misconception. It seems that the hype is 
all around AI chatbots. Al is all around 
intelligence, it’s around learning. Do 
you want a machine to learn by itself? 


SensioLabsWorld 0 Twig Cesificaton now aunilabie ©) 4,000 exam centers around the ward 


The flexible, fast, and secure 
template engine for PHP 


[wig is a modern template engine for PHP 


Templating engine Twig compiles templates down to plain optimised PHP code 


Secondly, by ‘chatbot’ do you really want 
to chat with a bot? I can reel off a long 
list of successful non-AlI bots. The other 
thing to remember is that as these things 
are one-to-one private communications, 
there’s no way to see how they perform 
without having one yourself. 


CMS 

TEMPLATING ENGINES 

What are your thoughts on best practice 
around templating? 

Simon Bocko, London 

SK: Templating is all about enabling 
designers to work at speed, whilst 
retaining control of style and structure. 
At Jadu, now that we continuously release 
(every two weeks), it’s much easier to 
accommodate preferred ways of working. 
Twig, for example, is a great templating 
engine that’s now natively supported 

in Jadu and allows true separation of 
business logic from templates. Use 

of preprocessors like Sass with BEM 
methodology has meant designers/ 
developers can be more productive 
without dulling their creativity. Aside 
from that, we would advocate HTTPS on 
everything, a focus on accessibility as 
best practice and, of course, responsive 
design now is a global standard. 


CHATBOTS 

THE RISE OF THE BOT 

People used to complain about not 
speaking to a human on the phone. What’s 
changed? Why the rise in bots? 

Dan Wiseman, London 


SL: I don’t think people wanted to speak 
with a human. They just wanted the 
quickest and easiest way to solve their 
problem. An endless menu of press one, 
two and so on works great if you can 
solve your problem in the first or second 
step; otherwise, it’s far easier speaking 
with a human. But in the same scenario, 
we’ve been using cash machines for 
years. I’d much rather use an cash 
machine than to have to join a queue in 
the bank to get my money out. We don’t 
want to speak with ahuman sometimes. 
We want to solve a problem/perform a 
task as quickly and easily as possible. 


CMS 

CHAT WORKING WITH CMS 
Do you think off-the-shelf chatbots are a 
welcome mass-market CRM solution or an 
accident waiting to happen? 

Simon Bibby, London 

SK: Chatbots are great at helping users 
find answers to questions that you’ve 
already answered and that’s often the 
majority of queries that come into a 
CRM solution. Off-the-shelf chatbots 
may work here in time, but you can’t 
beat dealing with a human being for 
personality and intelligence (at the 
moment). For us, the mission for Jadu is 
a combination of CMS, instant chat and 
CRM, and for that to happen websites 
need to be intelligent and as automated 
as they possibly can. Right now, you 
definitely have to teach AI first and to 
avoid mishaps, it needs to hand novel 
problems over to humans. 


3 SIMPLE STEPS 


Are there any critical 
limitations for a designer 
creating a website fora 
CMS like Jadu? 


SK: Any framework, including a CMS, is 
going to have a set pattern you need to 
follow to benefit from its features. 


KNOW HOW 
It's key to know how to manipulate 
features in your CMS to enhance the 
UX. You can make any good CMS work 
hard for you. 


PICK THE RIGHT METHOD 
Jadu's out-of-the-box templates 
follow Atomic design methods 
(atomicdesign.bradfrost.com), which allows 
for modular, reusable components. 


ie) 


Pulsar 


De eee eee nm Ne Pe bale ee tinnee peti 


——— ee 


USE TOOLS 

Templating engines like Twig (twig. 

sensiolabs.org) help designers craft 
beautiful experiences, as do tools like 
patternlab (pattern/ab.io). At Jadu, we've 
open sourced our design system Jadu 
Pulsar for creating Uls; that's been made 
possible by tools like Twig. 
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/, Side project 


This holiday season. 
unwrap a 


Fun Foct 


BGivoProgress 


#GIVEPROGRESS 


Griffin Johnston’s side project encourages the gift 
of giving and donating to charity 


| ie 


job: Freelance designer/ 
developer 


w: griffinjohnston.net 
t: @GriffinJohnston 
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SIDE PROJECT OF THE MONTH 


net: In a nutshell, what is #GiveProgress? 

What inspired the idea? 
GJ: Give-progress.org is a website that lets its users 
create a digital wishlist of high-quality, vetted 
charitable organisations. They can send these 
wishlists to friends and family to ask for donations 
instead of gifts on holidays, birthdays and so on. I 
came up with the idea after Trump won the election. 
The holidays were coming up, and I started thinking 
about all the money that would go into buying gifts, 
and how that money might be better spent. 


net: How did you go about putting it together. Was it 
a collaborative effort? 

GJ: I started by sending out a short survey to friends 
and colleagues to gauge interest. I got an extremely 
positive response, and a number of people offered to 
help in various ways. Having collaborators was crucial 
to this project, since it let me focus on designing and 
building the site, while the team wrote press releases, 
vetted charities and took care of pretty much 
everything else. Shout outs to Elaine, Eva, Hannah, 
Mary, Penny, Susan and Susan! 


net: Tell us a bit about the design. What kind of look 
were you going for with the site? 
GJ: I had very little time to get something out the 


#GiveProgress 


door, so I had to create a design that was attractive but 
easy to implement. I settled on a flat look with large 
areas of solid colour, and a focus on fun typography 
and simple shapes. I think it works pretty well! 


net: What technologies did you use to build it? 

GJ: ’'m using Gulp to pre-compile Handlebars, Sass 
and good old HTML for the marketing pages. The 
wishlist portion of the site is built entirely with 
vanilla ES6 transpiled by Babel. The interaction was 
simple enough that a library like React seemed 
unnecessary, and it let me get down to a single 18K JS 
file for the entire site. Speed matters! 


net: Did you have to overcome any big hurdles 
when putting this together? How did you manage 
to tackle them? 

GJ: The biggest challenge on this project was the 
extremely short time I had to go from conception toa 
functioning website (about a week and a half of spare 
time during a busy work season). I was only able to 
make this happen with an unhealthy amount of 
coffee, and huge amounts of help from my amazing 
volunteer team. 


net: How did you drum up interest in the public? 
Have they responded well? 

GJ: We have a zero-dollar marketing budget, so our 
primary strategy has been organic social media 
spread and word of mouth. We’ve gotten a lot of 
attention from our featured charities tweeting about 
us. Overall the response has been pretty amazing! 
Especially considering that it was launched just before 
the holidays, when many people had already done 
their gift shopping. BI 


Illustration: Megan Reddi www.meganmakesillustrations.co.uk 


Exclusively for net: the latest in a series of anonymous 
accounts of nightmare clients 


* 


> My boss asked me to do a design ona 

sound panel for a client once. | wasn’t 
given any instructions for the design or concept 
other than to make it “bold, edgy and fun” and 
“put some flames on it.” 


Me: “Those instructions are a little vague to me. 
Do you have anything more specific that | can go 
off of?” 

Client: “Just go ahead with that. I’m sure you'll 
come up with something great.” 

Sol did aflame design and subsequently sent 
it to the client. He loved it. But then he showed 
the design to his wife. 

Client: “My wife has a few suggestions.” He then 
asked for three different designs as a variation 
on the theme. 

| did that. 

Client: “My wife doesn’t like it. She says there 
shouldn't be any orange.” The orange that | was 
using was the company’s pantone. 

Client: “Instead of using the orange, my wife 
thinks that the flame should be purple instead 
to really contrast.” 

| sent him a purple flame design. 


Client: “My wife thinks the flame should be 
orange now.” 

| sent another orange variation, but she said it 
didn't contrast enough. | eliminated the gradient 
shading and she said it still wasn’t right, asking 
me to move away from the company's orange. | 
did, and then she complained that it wasn’t the 
right pantone. 

After she rejected my sixth revision, | 
complained about the entire situation to my 
boss, who then called the client. The client 
started apologising to him before he had even 
said a word. 

Client: “I'm so sorry, we've unleashed a dragon 
on you. Everyone liked the first one, she just 
went on her own rampage after that. We will 
take what you've sent, I'll make sure she doesn’t 
ask for any more changes.” 

Of course, the worst part was they weren't 
paying for this design. It was a favour that took 
over a week of my time. 


CLIENTS: 


clientsfromhell.net 


* 


BUILD YOUR 
SKILL SEI 


If you're intending to take a new 
step in your career this year, it’s a 
good idea to consider what skills 
employers are looking for. We 
asked the @netmag followers 
what skills they think are in highest 
demand at the moment. 


BUZZWORDS RULE 
A few people mentioned UX asa 
sought-after skill. “Anything with a 
saleable buzzword attached,” said 
@thepixelgrid. “Being ‘good at UX’ 
seems to be a hot-button as 
companies try to save their bounce 
rate!” @simonminter agreed, 
“though it has no real meaning.” 


DESIGN SYSTEMS 
The implementation and 
maintenance of design systems 
was @Benjieboo's pick, seconded 
by @mattecook. Top picks for him 
are “designing animation within a 
design system, and developers 
who can collaborate on design via 
in-browser prototyping.” 
@simoncarr chose SVG use, 
OnScroll animations as well as 
CMS customisation. 


MULTITASKING AND 
ORGANISATION 
@Buck__Mild thinks you need to 
“juggle 4O projects, remember 400 
items for each of those projects, 
and not lose your cool during day- 
long meetings”, while 
@frontendben says that “being 
reliable, communicative and 
delivering what was promised” will 
get you far. 
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DOODLE DEN 


S At Beyond, creativity isn’t 
limited to the creative 
department — because we don’t 
have one. We believe in harnessing 
creativity from our whole team, so 
it’s important for us to have an 
environment that’s conducive toa 
collaborative way of working. 

We moved to London Bridge 
three years ago, into Kurt Geiger’s 
old warehouse, after outgrowing 
our old office in Soho. 

Since then, we’ve been making 
our mark on the space, most 
notably with our bespoke walls by 
the Doodle Man (thedoodleman. 
co.uk) [1]. The Beyond team 
submitted their favourite 
memories from our seven-year 
history, which the Doodle Man 


Charlie Lyons gives us a guide to Beyond’s London-based 
studio, which prides itself on being a creative space for all 


WORKSPACE 


weaved into his signature style, 
resulting in walls that contain a 
story personal to everyone who has 
worked in the LDN office. 

Another item that tells you who 
we are — quite literally — is our 
neon sign [2]. We got this two years 
ago from God’s Own Junkyard, a 
warehouse in Walthamstow that 
houses one of the largest neon 
collections outside the US. We are 
lucky enough to own one of the last 
pieces created by Chris Bracey, the 
artist, designer and creative junkie 
who owned God’s Own Junkyard. 

Beyond is a design and 
technology ideas company, so 
we're always looking to fill our 
studio with technology that helps 
facilitate and inspire ideas. Our 


VR kit [3] allows our designers 
to draw in 3D, resident gamers to 
immerse themselves in virtual 
landscapes like never before and, 
crucially, it allows our whole team 
to experiment and keep up to date 
with tech that will no doubt have a 
huge impact on the way we work in 
the not-so-distant future. 
Similarly, we have our 3D printer 
[4]. After years of enabling our 
ideas to jump from our heads, to 
our screens, to something tangible, 
the front of the printer started 
to crack. This was easily solved, 
though. We just printed a new face! 
So, the printer is still going 
strong, printing everything from 
pen pots to toys and figments of 
the team’s imagination and, most 
importantly, awards for our Beyond 
birthdays [5], which you can 
usually find proudly displayed on 
the top of our monitors. 0 


Charlie is the general manager of Beyond 
London (bynd.com). You can follow the 
studio on Instagram (instagram.com/bynd) 
for more behind-the-scenes access 
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Media Temple focuses on delivering the world’s best 


performance and support so that creative professionals and 
enterprises can focus on bold ideas, not web servers. 


mediatemple.net 


TIMOTHY SMITH 


theboldreport.net 


CSS LAYOUT NEWS 
With new tools like CSS Grid 
Layout and Flexbox, it can be 
difficult to know what to read 

to stay informed. Rachel 

Andrew curates this incredibly 
helpful newsletter with links 
to tutorials, conference talks 
and workshops, and other 
layout-related news. 
csslayout.news 


CSS REFERENCE 

I've been writing CSS for ten 
years but | forget properties 

and rules all the time. CSS 
Reference is a guide to some 
popular properties with live 
examples you can play with. 

The search and collections 
grouping helps you find what 
you're looking for quickly, too. 

cssreference.io 


PIGMENTS 
Pigments is an Atom package 
that displays colours in CSS, 
Sass, Less and Stylus files. 
It'll even display the colour of 
variables. It's easy to search 
for colours, see a nicely 
formatted colour palette for 
the entire project, and convert 
colours to other syntaxes. 
atom.io/packages/pigments 
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PHOTOGRAPHY 


This month... alongside her web work, Sue Jenkins has 
found national acclaim for her photographs 


(> My love for photography began at five 
years old when my mother let me take 

a whole roll of photos with her 126 Kodak 
Instamatic. Getting those pictures back was like 
magic! At seven, | got my first camera: a Kodak 
Pocket Instamatic that used tiny 110 film. Then, 
at nine, | gota 35mm SLR Minolta XG 1 witha 
45mm lens. That was the camera that taught me 
how to see. | became a keen observer of life; 
obsessed with capturing ideas and moments. 

During college, | discovered my passion for fine 
art photography and began taking self portraits 
to make political statements about gender roles 
in society and the idea of ‘women’s work’. | even 
worked out a system of coordinated mirrors, 

a tripod, and the camera's self-timer to get the 
shots | wanted. Later, | added a cable release for 
even greater control over capturing, as Henri 
Cartier-Bresson has famously coined, ‘the 
decisive moment’. 

My work began to shift as | discovered 
photographers like Cindy Sherman, Sally Mann, 
William Wegman, Andreas Gursky, and Bernd 
and Hilla Becher. | no longer felt the inner urge to 
create political art and instead began to pursue 
something more wordless: a sense of time, a 
moment, a memory. In 2008 | enrolled inan MFA 


photography program. That's when things really 
took off. Since then I've been lucky enough to win 
several awards and exhibit my work nearly 50 
times around the US. 

Today my photography reflects my personal 
aesthetic, and is heavily influenced by 
minimalism and colour field painting. It includes 
elements of repeating images or image sets, 
grids, and a strong horizontal framework. | enjoy 
capturing the everyday details that may not seem 
noteworthy, and deliberately photograph spaces 
without people. | also try to print my photographs 
on unexpected materials such as canvas, cotton, 
glass and melamine. 

I've also started to get involved in social 
and political art again, and am thrilled to have 
participated in the first Nasty Women exhibition 
in New York City. I'm excited to see where this 
new direction might take me. Photography has 
given me a beautiful way to express myself more 
deeply than | ever could with words. J 


a Sue (@LuckychairNews) is a web 
‘designer and frontend developer, 
trainer and creative director of 
* Luckychair Design Studio 
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OPERA BROWSER FREE FRONT-END DEVELOPER HANDBOOK 2017 FREE LOTTIE FREE 


Vecteezy Editor 


VECTEEZY FREE DATEDROPPER FREE THE STARTUP WAY $21 


What we think 
(1) The Opera browser has a new refresh of its Ul in the developer stream, complete with a new look and more features. Head to netm.ag/ 
opera-292 for more info. (2) Find out how to learn frontend engineering and what tools you should be investing in (netm.ag/frontend-292). 
(3) New from Airbnb design is Lottie (netm.ag/lottie-292), an iOS, Android and React library that renders After Effects animations in real time. 


(4) Ever wanted a quick and free way to create beautiful vector designs? Check out the beta version of Vecteezy Editor (netm.ag/vecteezy-292). 


(5) Version 3.0 of datedropper (netm.ag/datedropper-292), the award-winning jQuery UI datepicker, gives you completely redesigned scripts. 
(6) It’s not out until October 2017, but that doesn’t stop you pre-ordering New York Bestseller Eric Ries’ The Startup Way (netm.ag/startup-292). 
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WORLD JA DAY 


Bristol’s World IA Day expertly raised awareness of the 
practice of information architecture, writes Eddie Rich 


EVENT REPORT 


DATE: 18 FEBRUARY 
LOCATION: BRISTOL, UK 
URL: 2017.worldiaday.org 


Last month | travelled to Bristol for the World 
Information Architecture event organised by 
uber consultancy Nomensa. 

The first talk was by Dan Ramsden and Charlotte 
Edwards from the BBC. Dan presented a theoretical 
model he'd been working on to keep projects on 
track and to hold together the vertical [A work with 
the horizontal UX that cuts across it. It was really 
interesting to see how he'd developed it and to hear 
how it’s being used in live projects. Charlotte took us 
through a project she’d been working on which had 
proved the model's value. 

Next up was Paul Wilson, a ‘smart city’ advisor. 
Paul sees IAs as vital to implementing and running 
smart cities. He painted a picture of the future 
which, by necessity of function, may move 
governance away from central control to city 
governance and global governance. It’s hoped that 
5G will enable more in coming decades (Paul believes 
that by 2050, smart cities will be a reality). 

The next talk, about voice, by Gordon Plant was 
closest to my interests. Using the term LUI (linguistic 


user interface) to describe vocal interactions with 
technology, he explained how the interfaces work, 
understand us and fall short of media predictions. 
The talk by Peter Kay was a fascinating walk 
through his experience with information, from 
working as an ICU nurse to his experience working 
as a social media strategist. Carole Court's talk was 
a fascinating journey from ancient Polynesia to the 
modern day, exploring how environmental clues and 
signposting have become second nature and led to 
interesting opportunities for blended experiences. 
The last talk was by Angel Brown who stressed 
the importance of quantitative and qualitative data 
in design and decision-making processes. She told 
us “UX really brought something to the table: 
qualitative research”. The correct use of both 
research types and data will successfully drive 
strategy and design. Without both, you greatly 
decrease the chances of building a successful 


strategy and project success. 


R 


Eddie (@eduardo_rich) is a design 
strategy and UX consultant for 
Richly Creative (richlycreative. 
co.uk), helping business design for 
their customers 
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EVENT GUIDE 


LONE STAR PHP 2017 
DATE: 20-22 April 2017 
LOCATION: Dallas, US 
Back for its seventh year, Lone 
Star PHP is once again packed 
with a great line-up of speakers. 
The Training Day returns by 
popular demand too, offering 
hands-on help to attendees. 
netm.ag/lonestar-292 


GENERATE 
DATE: 27-28 April 2017 
LOCATION: New York, US 
Brought to you by this very 
magazine, Generate heads back 
to New York for two days of 
insight, inspiration and practical 
advice. Get your tickets now. 
netm.ag/generate-292 


SDD 2017 
DATE: 15-19 May 2017 
LOCATION: London, UK 
SDD 2017 features over 100 
in-depth sessions and workshops 
on a wide range of key software 
development topics, delivered by 
40 world-class speakers. 
netm.ag/SDD-292 


BEYOND TELLERRAND 
DATE: 15-17 May 2017 
LOCATION: Dusseldorf, Germany 
Design, technology and 
inspiration will once again be the 
star of the show at this year’s 
Beyond Tellerrand. Be sure to 
register for a practical workshop. 
netm.ag/tellerrand-292 


PIXEL PIONEERS 
DATE: 22 June 2017 
LOCATION: Bristol, UK 
Gone but not forgotten, net’s 
erstwhile editor Oliver Lindberg 
has launched his own conference, 
aimed at bringing a concise one- 
day package at a fair price. 
netm.ag/pixel-292 
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ESSAY 
Sush Kelly looks at when it’s best to adapt and 


embrace new technologies — a hot topic for any 


forward-thinking web developer 
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INTERVIEW 

We talk to information architect,event 
organiser and author Abby Covert about 
making sense of other people's mess 


STORY EE) 


In his new design of business column, 
Christopher Murphy explores the importance 
of defining and sharing your business's story 


Janne Jul Jensen shares 


10 tips for how to create a UX 


department from scratch 


In 2015, I was asked to help establish 

and mature a new department at Lego 
focusing on the UX of its enterprise soft- 
ware. Around one and a half years into the 
process, I’ve learned the following: 


1 GET LEADERS TO COMMIT 
A UX department will only be success- 
ful if it has commitment from leadership. 
And not only a ‘yeah sure, let’s do that’ - 
the commitment should include economy, 
a willingness to hire, and be long-term. 
And most importantly: it cannot dwindle 
when things become hard and painful. 


2 CHOOSE ROLES CAREFULLY 
A new department is like a blank piece of 
paper. You can organise it any way you like, 
and with any roles you prefer. But once it’s 
done it is difficult to change, so choose how 
you organise it to be sure that it scales. And 
carefully choose your roles, so you’re sure 
they also cover future needs. 


3 ASSESS UX MATURITY 
Assess the UX maturity of the organisa- 
tion, to ensure you run the right activities 
at the right time. You have to meet the 
organisation where they are, with regards 
to level of knowledge, current approach 
and attitude. 


4 CREATE A UNIFIED TEAM 
A new team will often include people 
who come from different backgrounds. To 
present a unified approach, you have to 
streamline and unify how UX work is done 
within the team, making sure you all work 
the same way, by the same definitions and 
with the same focus. 


5 BE PRESENT IN PROCESS 
Many larger organisations are process- 
heavy, meaning that unless you exist in 
a process, you do not exist, period. So 
you will need to identify the processes 
and documents into which UX should be 
incorporated, and get those changed. 


6 CREATE SHOWCASES 
The most effective way to convince an 
organisation of the potential of UX is 
through exceptional showcases. Identify 
good UX showcases, do full UX work on 
those, and make sure the organisation 
knows you are behind it. 


7 KNOW YOUR USERS 

A large organisation means many IT users, 
so it can be unclear to a project team who 
they are developing for. Therefore, it is 
well worth spending time mapping your IT 
users, and making global personas that all 
projects have available for reference and 
can base their projects on. 


8 TEACH OTHERS TO FISH 
A newly founded UX team is usually not 
big enough or mature enough to take on all 
organisational projects right away. On the 
other hand, if demand exceeds supply this 
early on, it can be hard to say no. Make pro- 
jects you can’t participate in run effectively 
by themselves by teaching others to fish 
when you do not have a fish to give them. 
This can be done by creating a UX toolbox 
for them, by teaching them basic UX, and 
by acting as consultants. 


9 CONNECT THE ISLANDS 
In large organisations there are often 
several UX departments. These are often 
organised differently, have different work- 
flows and are at different maturity lev- 
els. Connecting them can benefit every- 
one and help streamline how you work. It 
means people won’t get different answers 
depending on who they ask. 


10 CULTIVATE UX MINDSET 
It takes time and effort to truly anchor 
a UX mindset. But until everyone in an 
organisation starts putting the user first in 
everything they do, truly great UX will not 
happen. This means making sure everyone 
knows what UX can contribute to a project, 
why UX is a team effort, how it fits into a 
development process, the origin of UX, and 


that it’s a science, not a matter of opinion 
or taste. The hardest thing is winning over 
sceptics. Listen to them, and gently correct 
any misconceptions they may have. 

Finally, ensure people know there is 
more to UX than delivering wireframes 
and graphic files by making the UX work 
that precedes those deliveries visible too. 
That work is what sets those deliveries’ 
quality, and it makes it easier to grasp why 
UX takes time. 

The exact activities necessary to build 
a UX department from scratch will vary, 
but hopefully some of these lessons can 
inspire or help you in your endeavours. 


Janne (@jannejuljensen) is a senior UX architect 
with the Lego Group. She also enjoys public 
speaking and always evangelises UX 
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NEW OLD TECH 


Illustration by Ben Mounsey 


As progress continues to accelerate, Sush Kelly warns of the 
dangers of being seduced by every next big thing 


> Progress in web design techniques shows no signs 

of slowing up. As the proponents of the early web 
are staggering round with 1,000-yard stares, you can’t 
help but feel a little overawed by the plethora of tech- 
niques and frameworks available nowadays. 

People are championing the new approaches that 
are about to change the way we work once again, for 
example Flexbox (already available) and CSS Grid. Rachel 
Andrew and Jen Simmons have been encouraging 
developers to look at these technologies now, in 
readiness for their arrival. 

There have been murmurings and posts in recent 
months from some of the current web industry’s found- 
ers — such as Andy Clarke and Jeffrey Zeldman — asking 
if it really needs to be this complicated, and whether web 
it losing its soul or becoming reliant on a standard output 
(three-column layouts, hero blocks and the like). Have 
we all become enslaved to the frameworks and tools 
available to us? 

Although they make a good argument, I don’t think 
there has been a time in my career where there has been 
more choice (or opinion) about how to build digital 
projects. We are long past ‘HTML, CSS and a little 
JavaScript’ — now there are CSS preprocessors and JS 
frameworks, and the components that make up a web 
project encompass a load of new elements — optimisation, 
CDN delivery and SEO to name a few. 

I have been working in websites since the year 2000, 
which means I cut my teeth on long-forgotten techniques 
such as tables and shims, all against the backdrop of the 


‘browser wars’ that make the current browser situation 
seem oh-so-compatible by contrast! As a digital director 
at a creative agency, it is on my shoulders to make sure 
we use the right technology on client work and invest 
our time wisely with regards to what we learn and (in 
due course) adapt into our processes. 

We are a small company of 12, and as such I am not 
detached from the actual builds, client liaison and the 
management of the resources we have to deliver. Iam 
right in the middle of the woes the developers, clients 
and project managers all face in the project life cycle. 


NOT LIKE THAT, LIKE THIS 
The talks and conferences advocate best practices 
and cutting-edge tech; why we should be using X, Y and 
Z. This is 100 per cent necessary. After all, the web 
industry is relatively young and we are still defining the 
standards of the industry to an extent. 

The problem is, those not using these technologies 
day-to-day in their work can be left feeling inadequate 
or somehow lacking. It is a lucky few who get to make 
their living pushing those boundaries and telling us all 
about them. Don’t get me wrong, it is essential to have 
these people pushing the bleeding edge, but it can result 
in an urge to jump into new methods too early, which 
can be the worst thing to do on live client work. 

You want long, productive relationships with 
clients. Changing how you build sites means having to 
readjust and remember more skills. As much as good 


commenting and a README file will help, you need to p> 
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make sure what you’re delivering will remain effective 
and usable for as long as possible. 

I completely understand how designers and develop- 
ers want to adopt the next great thing. I feel the same 
compulsion, and it is actually one of the things that has 
kept me in the industry so long. The fact is that I also 
have to think about the longevity of the plugin/library/ 
software as if it won’t stand the test of time, or ends up 
failing or losing support due to a later development, then 
the responsibility falls on us. 


EDUCATING JUNIORS 

Many junior developers have a real thirst for knowledge. 
It is often an inspiration to more senior team members 
when they arrive in the studio, eager to show a new 
method or technique that is emerging and explore how 
it might be used on a project. 

You want your staff to grow, develop and be able to 
work on things together, so again it’s important to make 


to use Flexbox for a full site at the moment, with iOS and 
Safari’s flaky support, would bea challenge that just may 
not be financially viable. 


EMBRACING THE OLD 
Clients, especially within larger companies, likely won’t 
be running the latest browsers. They could also have 
restrictions on their web access that could affect your 
build. And if it turns out the main stakeholder is using 
IE on an old laptop, the site better work on it or the 
project just won’t get signed off. 

Sometimes a client will have a good idea of what they 
want, or specify an incumbent system or technology that 
you need to work with. A key point for us as an agency is 
to be adaptive to these needs and work with them, rather 
than dismissing what the client has and trying to force 
them down the route we would prefer. Sometimes this 
may mean having to extend an existing codebase in order 
to keep within the technology required. 


It’s important to only take on board advancements that are 
an improvement on what went before. But when the churn of 
technology is so quick that we have interns who have never 
had to use a float, it becomes a real balancing act 


sure that you’re only taking on board advancements that 
are an improvement on what went before. But when the 
churn of technology is so quick that we have interns and 
junior designers who have never had to use a float and 
do not know life before Bootstrap, it becomes a real 
balancing act. 

A good example of this is the move from LESS to SCSS 
and also from Grunt to Gulp. Both these technologies 
are similar, but different enough to mean returning to 
a project using LESS/Grunt becomes an exercise in re- 
learning — or in the case of juniors or interns, learning 
a new (old) technology from scratch. 


LAYOUT GAMBLES 
Flex and CSS Grids are the current darlings of frontend 
talk. CSS Grid has the potential to revolutionise the way 
we will lay websites out in the future. At the moment it 
is still hidden in the latest browsers, although you can 
access it if you enable experimental features on the likes 
of Chrome. We cannot use it in live work for this reason, 
though with an imminent launch date, Grid could 
bring about as big a shift in web development practice 

as the shift from tables to divs and floats. 
We are using Flexbox on live work now, but only in 
ways that are a benefit — for example for ordering content 
in responsive layouts or vertically centring items. To try 
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When embarking on a new project, we now make sure 
we establish the required sign-off devices as soon as 
possible. However, over the years have had our fingers 
burnt on more than one occasion, when we have run with 
anew way of doing something with good intentions, only 
for it to cause issues as we tried to get the site signed 
off. This just serves to remind us that there are so many 
device /user combos that it just isn’t OK ifa given method 
will only work on certain browsers. 

Although you can make workarounds and shims, there 
often isn’t budget to do this. And when a client doesn’t 
have the right resources then you need to go with the 
solution that will please everyone. 

When it comes down to it, the main aim of the studio 
is to produce great, forward-thinking work, which means 
being fully open to new methods but also picking the 
right time and project to use them. It is a tricky 
balancing act, but one that gives me a great feeling of 
satisfaction, especially when a new process finally 
becomes ‘the standard’ on live projects. 


» Sush (@maxray) is digital director for 
Imaginate Creative in Leamington Spa, 
helping clients create user-focused 
digital projects 
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Interview 


© 
Abby Covert 


Words by Jim McCauley Photography by Eric Tillotson 


The web needs information architects. 
Abby Covert reveals how to become 
one, what makes it challenging, and 
why it can ruin your life 
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Websites used to be reasonably straight- 

forward things, but as the web marched 
forward from niche interest to omnipresence, 
things got more complicated. Not merely in 
terms of technology, but also in terms of 
volume. Back in the Nineties a corporate site 
could get away with being made out of flat 
pages and a sidebar navigation. Today, 
though, it might consist of hundreds of pages, 
if not thousands. 

Organising such massive web presences 
is an increasing challenge; not merely the 
nuts and bolts of taxonomy, but also the 
messier business of implementing it all 
within organisations where political and 
technological arguments can hamper the 
process. People can agree that they need a 
better website, but no one likes to be told that 
they’ve been doing it wrong. 

This is where information architecture - or 
IA - comes into play. It’s a discipline that 
made its name back when the web was 
finding its feet, and designers and develop- 
ers were beginning to tackle the challenges 
of large-scale sites, but as a term it fell out 
of fashion for a long while. Now, though, it’s 
enjoying a resurgence, and Abby Covert is 


one of the practitioners bringing IA back - 
although it’s never really gone away. 


DISCOVERING IA 
Educated in graphic design, she had her first 
taste of information architecture at univer- 
sity. “It was mostly focused around distilling 
complex subject matter into graphics like a 
poster or an information graphic) she tells 
us. Then in her first job out of school she 
worked as an icon designer, which led to her 
first information architecture job. 

“T told the team that I was working on that 
the icons were not the way to solve this 
problem? she recalls. “They asked me if I 
knew what information architecture was and 
Iwas like, ‘Yes, I’ma print designer, of course 
I do.’ They were the ones that kind of clued 
me into the fact that this was actually some- 
thing that was being applied to navigation 
systems with interfaces as well.” 

Discovering that there was an entire field 
of practitioners working on IA for digital 
systems was a key moment for Covert; she 
realised that this, not graphic design, was 
her vocation, and she’s been working as an 
information architect ever since. 


So what exactly is information architecture? 
Covert herself sums it up as making the 
unclear be clear: taking a whole mess of in- 
formation and figuring out the most effective 
structure and language for it, in order to build 
accessible, navigable and manageable 
systems, sites and apps. 

Covert explains that it’s a fundamental 
skill set within practices such as UX or in- 
teraction design. “I would say the closest 
words that people may have heard of more 
recently would be content strategy, which is 
also avery close sister pattern to information 
architecture in terms ofa practice} she says. 


MAKING SENSE OF THE WEB 
And the reason IA is returning to prominence 
now? “If you look at the evolution of the web 
over just the last decade it’s incredible how 
much has changed? she observes. “Even in 
the early days of websites, you used to be able 
to rely that people were going to start at your 
homepage and then they were going to go 
from there. When search engines came about 
and started to get very detailed in terms of 
crawling something more than just your URL 
then you had to start thinking about people 


landing on deep inner pages of your site. 
Then add to that the persistence of social 
media sharing content out of context. 

“All of a sudden you had to think somebody 
could end up on some random place on your 
application or your website, not knowing 
anything about you or even having intended 
to go there? she continues. “Having to think 
about it from a multi-channel and a more 
complex set of contexts, I think, has really 
just changed the way that we have to think 
about it. IA goes along with that.” 

Explaining the benefits of IA to clients, 
she finds, is best done 
through example. 

“There’s usually a pretty 

recent example for most 

companies, where the 

way that they’re organ- 

ising something or the 

language that they’re 

using to get across their 

point to a user or to each 

other is obfuscated by 

some choice that they’ve made. If you can 
key in on that example it’s generally an easier 
sell after that about the importance of think- 
ing about information architecture.” 


PERSUASION, POLITICS 
AND FACILITATION 
If the science of IA is reasonably straight- 
forward, however, the actual business of 


implementing it can be less so. Covert esti- 
mates that while 20 per cent of her job is the 
core business of drawing diagrams and 
mapping out fresh information structures, 
the other 80 per cent is what she describes 
as persuasion, politics and facilitation. “It’s 
hard to go into an organisation and critique 
something that somebody spent years creat- 
ing) she notes. 

And it’s this that can make IA a tremen- 
dously difficult discipline to teach, some- 
thing that Covert does alongside her IA prac- 
tice. “Iwas terrible when I first started doing 

this kind of work? she 
recalls, “because I just 
thought that if 1 came up 
with something that 
made sense to me, and I 
tested it and it made 
sense to users, that I could 
then give it to other 
people in an organisation 
and that they would 
believe me. 

“In reality it’s not that cut and dry. That 
other part, the persuasion and the under- 
standing of your stakeholders and the un- 
derstanding of the environment that you’re 
working within, that’s something I haven’t 
figured out a way to teach without the 
element of time. I think that’s something 
that most of my students get theory on, but 
they really have to get out of their education 


Interview 


and into their working world to discover the 
realities of practising it.” 

Consequently Covert finds that the people 
most suited to a career in IA are curious and 
optimistic in the face of ambivalence. “I 
think that there’s a lot you have to fight, in 
terms of people not wanting to pay attention 
to things that are causing misinformation 
or things to be murky in an organisation) 
she says. 

“To be a person that is not only curious 
and to make changes to those status-quo 
realities, but also to be a person who isn’t 
afraid of itand has hope that it can be worked 
through if given time; I think that makes a 
good information architect. Somebody who 
can set aside their own personal bias also 
helps quite a bit.” 


EVERYTHING CHANGES 

As with web design and development, it’s a 
job in which you never stop learning. “I feel 
like every time I’ve got my hands around this 
thing and] think that it’s solid andI can grasp 
it, it changes. 

“J remember when I was three or four years 
in, I was very focused on software at that 
point, andI thought, man, this is great. I’ve 
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finally got a grasp on this, I know the pat- 
terns, I know how to test things, I know all 
the questions to ask. Then rich internet ap- 
plications changed everything and all of a 
sudden you couldn’t rely on a click and a 
reload for things to happen any more.” 

Without any set qualifications or career 
path, information architecture can be a dif- 
ficult business to learn about and establish 
yourself in. There are quite a few books on 
the subject — with Covert’s own book, How 
to Make Sense of Any Mess (abbytheia.com/ 
makesense), serving as a great introduction 
— and Covert will be bringing her experience 
to Generate New York on 27 and 28 April. 
This will be an introductory talk that she 
describes as a vocabulary lesson in under- 
standing information architecture as a 
concept, combined with actionable titbits of 
practical knowledge. 

She’s also hosting a more in-depth all-day 
workshop that, she promises, gives you all 
the conceptual frameworks you need to know 
about in order to give you confidence in prac- 
tising IA. And it doesn’t mean you need to 
be set ona career as an information architect; 
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Covert says that anyone working on larger- 
scale websites will benefit from it. 


THE PAIN WITH NO NAME 

“Ina lot of cases,” she points out, “the divide 
that we see between designers and develop- 
ers in the space of the web can be filled with 
the practice of informa- 

tion architecture. Backin 

the early dawn of the web 

they used to call infor- 

mation architecture the 

pain with no name. I find 

that web designers and 

developers are often de- 

scribing that pain and 

don’t really have the skill 

set to think through how 

to get to that next clear place.” 

If you’re feeling the need to incorporate 
IA into your work right now, Covert suggests 
writing a controlled vocabulary — a list of 
words that you say to your customers and to 
each other — and defining those terms really 
clearly so that people working on everything 
from the interfaces to the backend to the 


business model all understand them in the 
same way. “I find that relieves a lot of tension 
immediately from a team) she tells us. “It’s 
not a fun job to write a list of words, but I do 
find it to be very valuable.” 
Beware, though; once you fall down the IA 
rabbit hole, it will change how you see the 
world. “It drives me 
crazy, she says. “When 
Isee things that are in- 
efficient for no reason, 
or when I see things 
that are not organised 
but are expected to be 
used by other people it 
drives me nuts. So yes, 
it definitely changes the 
way that you see things. 
“1 dida menu design project years ago, and 
Ican’t look at a menu any more without nit- 
picking it to death. My husband hates it, 
‘Can’t we just have a meal without you re- 
IA-ing the menue” 


Next month: Speaker, author and 
mobile strategy expert Jonathan Stark 
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STORY 


Christopher Murphy explores the importance of 
defining and sharing your business’s story 


la INFO 


Job: Writer, designer 
and educator 


t: @fehler 


w: www.tinybooks.org 


ee In the fourth article in my ongoing series 
exploring the design of business, I’ll explore the 
importance of sharing your business’s story and 
communicating your values to your customers. 

Stories are everywhere. We can learn through 
stories, we’re entertained by stories and our lives are 
lent meaning when stories lie at their heart. To build 
a business that lasts and provides value, we need to 
first look inside ourselves and identify the stories 
that drive us. 

We are all individuals. We all have stories that 
matter to us. The secret to building a business that 
matters to others is to identify these stories and 
build around them. When we do, we find ourselves 
no longer creating products or services, but stories. 


PEOPLE BUY STORIES BY PEOPLE 
Spending some time considering your story ensures 
your customers understand your business’s mission 
and purpose. Your business might offer a product or 
a service, but it should still have a story. 

Benjamin James Edmonds makes kitchen knives 
by hand in his workshop in Derbyshire. Every knife 
he makes is lovingly crafted. It’s no surprise to see 
he shares his story prominently (blok-knives.co.uk/ 
story). As Edmonds puts it so succinctly: “There’s 


something very raw about making a knife. It’s 

back to basics and for this reason I don’t like to 
overcomplicate my production. All of my focus goes 
into making kitchen knives.” 

In just a handful of sentences he paints a picture of 
the business that draws you in. His tone is friendly, 
“T welcome visits and encourage people to come and 
have a play. I may even pop the kettle on!” The offer 
of a nice cup of tea humanises Blok Knives’ brand, 
encouraging you to connect with it. 


BEYOND THE MASS MARKET 
Regardless of your business’s focus, there is likely to 
bea story behind it. Spend some time teasing it out 
and share it. 

The old, mass manufacture model of business that 
characterised much of the 20th century is evolving. 
In its place a new model is emerging, focused around 
strong beliefs and a desire to change things. 

When all that we consume is driven by a race to 
the bottom we find ourselves missing something. 
We search for meaning and, for the most part, mass- 
manufactured commodities lack meaning. 

This has led, perhaps unsurprisingly, to a renewed 
focus on the need for stories behind the everyday 
things we make a part of our lives. We want to 
know the provenance of the product. Where did it 
come from? Who created it? These stories behind 
the products and services we use in our lives are 
becoming increasingly important to the consumers 
of today and the best businesses acknowledge this. 

It doesn’t matter what you make - it might be 
physical, it might be digital - regardless, you should 
spend some time considering your story. 

Your business’s story is unique to you: it’s a 
product of the people behind it and the purpose that 
drives it. By spending time defining and sharing your 
business’s story you give your customers something 
deeper to believe in and build the deep relationships 
that a business needs to stand the test of time. 


Bloko 


Narrative driven Blok Knives shares its story prominently at its website 
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JESSICA ROSE 


The founder of Open Code talks peer- 
supported learning and developer relations 


la INFO 


Job: Head of developer 
relations, Crate.io 


w: jessica.tech 


t: @jesslynnrose 


net: Where does your interest in peer-supported 
code education stem from? 

JR: Before moving into technology, I worked in 
education. I’ve always been interested in finding ways 
to encourage learners to rely on each other to support 
the educational process. When it came time for me to 
start learning to program myself, leaning heavily on 
peer support and the local community felt natural. 


net: What was the reason behind founding the Open 
Code study meetups? 

JR: I founded the Birmingham Open Code meetups 
(www.meetup.com/Birmingham-Open-Code) for very 
selfish reasons. I’m self-taught and a few years ago, I 
was having a difficult time finding places I could get 
my questions about programming answered. I started 
the group and found that there was a great deal of 
local demand for peer-supported meetups. Other 
Open Code meetups formed through the community 
in other cities. 


net: You’re also the co-founder of Trans*Code with 
Naomi Ceder, which aims to help draw attention to 
transgender issues. How are you going about that? 
JR: Trans*Code was almost entirely Naomi’s doing. 
I’m always careful to credit her, as she’s the brains 


behind the operation and does most of the heavy 
lifting, as well. We’ve set out to create a space 

for community building, skills development and 
creativity that intersects with the technology and 
transgender communities. I hope we’re providing 
that, through events and online community spaces. 


net: You’re currently working as head of developer 
relations for an open source SQL database project, 
Crate.io. Can you tell us what’s different about this 
database project? 

JR: Crate.io is the team of technologists behind 
CrateDB, an open-source SQL database designed to 
support working with machine data at scale. The 
open-source database market is pretty crowded, 
but we hope that being the only one really built for 
working with the scale and demands of machine 
data will earn us a place in the industry that we can 
continue to contribute and learn from. 


net: What excites you about the kind of work that 
you do? 

JR: I love developer relations for so many reasons. 
Getting to spend my time speaking to users and 
community members about the great things they’re 
building is so inspiring. I love the variety of tasks 
that pop up day to day. I love public speaking. I love 
the travel. I secretly even love the manic pace of it all. 


net: Despite all this frantic activity, you say that 
you’re still looking for new projects to get involved 
in. How do you find the time? 

JR: I’m terrible about getting pulled into interesting 
projects all over the place. I’m afraid there are too 
many clever people doing amazing things in tech 
right now. I don’t manage to keep up with all of these 
projects in as much depth as I would hope. But having 
a house husband who’s great with pitching in for 
admin and scheduling work 100 per cent keeps me 
afloat when I’m doing too much. Many thanks to Matt 
Rose for this. 


net: If you could go back in time and have a 
conversation with your younger self, what advice 
would you give to her? 

JR: I’ve been fantastically lucky. I think the role I 
have now has let me become the person I always 
wanted to be when I was younger. I might try and set 
myself on the path of being kinder and more open to 
others earlier on in life, but I don’t think I would want 
to give too much direction to younger me. I wouldn’t 
want to ruin the surprise! B 


Jessica will be speaking at the Pixel Pioneers conference in 
Bristol (pixelpioneers.co) on 22 June 2017. 
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CULTURE 


WHAT HAS BEEN YOUR 
TRIGKIEST CLIENT REQUEST? 


Client briefs come in a variety of guises; you never know quite to expect. We asked 
seven designers to describe the biggest curveballs they’ve been thrown 


AMY PARKER 


Co-owner, Fore Design 
foredesign.co 


u 


i) | had a client who wanted a minimal, ‘Bauhaus- 
inspired’ website. I've always been a minimalist 
but this particular client meant what they said: 
absolutely nothing extraneous whatsoever. | really had 
to push myself to create a unique, interesting design 
that presented the content as simply and purely as 
possible, with every single element on every page 
serving a purpose. Now | try to apply that principle 

to all of my work. 


a MELANIE DAVEID 


Product design lead, Onefootball 
melaniedaveid.com 


& The brief was to create a running 
app for a leading sports brand, 
and | didn't have a lot of experience in 
designing products back then. Plus, 
the brief was rather vague. A feeling of 
panic was slowly rising because this 
product was going to last. | had to get 
out of my comfort zone and figure out 
a new process. A team effort was the 
crucial factor that eventually paved 
the way for my career in product 
design — but back then, | made it more 
difficult for myself than it was. 
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DAN PERRERA 


Co-owner, Fore Design 
foredesign.co 


I had a client approach me with 

an idea for a sign-up experience 
for a new part of their business. 
They wanted to mimic how other 
companies had solved the problem 
— but their approach was far more 
complicated than necessary. 
With some convincing (and some 
prototyping), we were able to come 
up with the right solution for them, 
reducing a five-step process down 
to a Single step. 

During the project, I realised 

that things that seem obvious to a 
designer might not be so obvious to 
clients who don’t work in our field. 
It’s always worthwhile to clearly 
explain your thinking and tie design 
decisions back to concrete goals. 


JULIE ANNE LANE 


Multidisciplinary designer 
»® jaldesign.ca 


When I have a hard time with clients, 

it’s generally because they have a 
specific mindset that can’t be shifted. 
Sections of design often do come from 
one’s gut, but there is a proven benefit 
of using research and data to ensure it’s 
usable and desired. I’ve had a few clients 
that stick to ‘No need to test with users, 
I know what they want’ or ‘I want my 
target market to be everyone’. It’s our 
job to show the benefits of shifting this 
understanding, but occasionally there’s 
no budge. 


rds DAVID URRY 
= 


- Digital project manager, Fingo 
a www.fingo.co.uk 


& The most difficult challenge we have is when a client goes against the 
research and statistical information. When clients disregard best practice, 
data and user needs, the project can devolve into a discussion over subjective 
opinions that delay launches and put the website's success at risk. When faced 
with this, it's important to reiterate the process and, in the case of sticking 
points, look to a programme of conversion rate optimisation once the site is 
launched. This helps us take back control of the project and move any murky 
subjectivity into a test that can be proven either way. 


RESOURCES 


7 NIGHTMARE CLIENTS F**K YOU, PAY ME 


+) Every designer has met — or will meet +) All web designers experience problems 


— at least one ‘client from hell’ in their 
career. In this amusing but also useful Creative 
Bloq post (netm.ag/hell-292), Bryce Bladon of 


the Clients from Hell blog describes seven kinds all the excuses clients come up with, and how 


of terrible client, and offers practical tips on 
how to deal with them. 


actually getting paid by clients. In this 
hugely popular talk (netm.ag/fu-292), Mule 
Design designer Mike Monteiro runs through 


to counter them and make sure you get the 
money - whatever they throw your way. 


JENNY JOHANNESSON 


Senior designer, Ueno 
jennyjohannesson.com 


ia) A client wanted to save some money, so they 
asked us to work with a production company 
in India where only one person could (almost) speak 
English. In our first meeting we also learned they 
would not speak to women, which as a team of 
mostly women made for some really frustrating 
conference calls. 

Even though it was a very simple site, the company 
managed to mess up the most conventional things. 
And because of the communication challenge, the 
feedback never seemed to come through. Eventually, 
the client fired the production company and we never 
had to work with them again. 


ANNA MARIA HOFFMAN 


Freelance graphic and web designer 
www.annamariahoffman.com 


ED Early in my career | received a 
client request to design a website 


for a nonprofit. She had great ideas 
and intentions, but it was challenging 
to ensure all of her needs were being 
met since she kept on changing her 
mind. We eventually were able to agree 
upon a final design, but the experience 
truly taught me the importance of 
ironing out your work scope with a 
potential client first, before starting 

a new project. 


HOW TO DEAL WITH SCOPE CREEP 
Scope creep occurs in a web design 
& project when clients start demanding you 
take on extra responsibilities that exceed the 
original goals and objectives. It’s a common 
cause of client relationship breakdown, and this 
blog post (netm.ag/creep-292) covers how to 
identify scope creep, and ways to avoid it. 
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DESIGN ITERATIONS 


Lydia Lodovisi discusses the importance of using 
iteration in your web design workflows 


Taking an iterative approach to web 

design might seem like a time-inten- 
sive, laborious process. On the contrary, it 
can lead to faster, more useful designs and 
outcomes. Adding iteration to your process 
can help you create with confidence and 
make more informed design decisions. Let’s 
talk about how iterating might benefit your 
next web design project. 

First, what is iteration? It is the process of 
prototyping, testing, reviewing or analysing 
test results (either formally or informally), 
and repeating this cycle as much as possible 
or necessary. This can happen at low fidel- 
ity (such as with sketching a website wire- 
frame), high fidelity (with fully articulated 
design elements) or somewhere in-between. 
Ideally, the sooner you can get something 
into the hands of the people you’re designing 
for, the sooner you can start to improve it. 

Not convinced? Consider these benefits of 
incorporating iteration into your workflow. 


GET FEEDBACK EARLIER 
Waiting until website launch to get audience 
feedback isn’t ideal, nor is it a time when it’s 
easiest to make changes. Knowing how audi- 
ences interpret designs early on can give you 
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critical insight into what’s working and not 
working, and help you shape better solutions 
based on that feedback. 

Getting a design, especially lower-fidelity 
ideas in the form of wireframes, in front of 
audiences before getting too far down the 
process, means that there’s greater oppor- 
tunity for revising and improving. You might 
get feedback that a key task isn’t easy to per- 
form, or that a path to important informa- 
tion isn’t intuitive for people as they navigate 
the site. This kind of discovery may impact 
large parts of your design system, site archi- 
tecture or other key elements that would 
otherwise require a complete rethinking of 
how all the pieces work together. Being able 
to change that sooner than later makes it 
easier, faster and less costly to do so. 


DEVELOPER INPUT 
Not only is it beneficial to get audience 
feedback, developer input on design can 
help make a design even stronger. Having 
a developer eye on designs sooner usually 
leads to greater success and efficiency when 
that design reaches the development stage 
of the process. Developers can help iden- 
tify where small revisions in a design would 


make big difference in development effort. 
This kind of collaboration can also save the 
heartache of realising too late that what you 
thought was a great solution would actually 
be a development nightmare and negatively 
impact the project timeline or budget. 


TRYING MULTIPLE IDEAS 
Sometimes you might be considering more 
than one solution to a challenge. This open- 
ness may also save you from getting set on 
your initial ideas, allowing more thoughtful 
or useful ideas to take shape. Taking an itera- 
tive approach allows for the space to see how 
each solution performs when in the hands 
of audiences and which might be the most 
appropriate solution. Design decisions then 
become more definite, rather than a series of 
educated guesses and provide clarity for both 
you and your clients on the approach. 


SAVING TIME 
Incorporating audience feedback, avoiding 
development nightmares and getting to the 
best idea as quickly as possible saves time. 
Staying in lower-fidelity design at the begin- 
ning means you can change things rapidly, 
without a lot of fuss, before you start to get 
into detailed design where the stakes for 
change are higher and often more costly. 

One of the biggest intents of iteration is 
to make design solutions tangible quickly in 
order to continually refine and make those 
solutions even more meaningful than their 
first instance. Bringing an open mind and 
moving past the expectation of perfection 
will lead to ideas and solutions that better 
serve audience needs and goals. 

The benefits of continual iteration lead 
to more positive web experiences that are 
more likely to be adopted and regularly used, 
along with better UX outcomes and metrics 
around those experiences. Which in turn 
leads to more satisfied audiences, more sat- 
isfied clients and more meaningful work 
for designers. It also sets the stage for how 
that website is managed and updated going 
forward, inspiring a mindset of continual 
improvement that keeps a site alive and well 
into the future. BY 


Lydia Lodovisi (Q@lydiology) is the design director 
at SmallBox, which is an experience design 

and consulting agency. SmallBox is located in 
Indianapolis, Indiana. 


G ‘@) TECH Call our expert team on 
[CIO Mss IT 0207 183 2494 


Ig 


Managed IT Support: 


m= FREE QUOTE 


www.,giotech,.co,uk 


internet, 
TV & phone bills! 4 


al 


One quick call. ‘ 
Thousands of deals. 


Call free and speak to our London based impartial experts. 


We review over 6,000 deals from the top UK providers to 
find the right one for you - with our Lowest Price Guarantee. 


Our experts do the hard work, answer your questions and 
even arrange your installation! 
PRICE COMPARISON 


We're proud to be the only service to be accredited by Ofcom CALCULATOR ae _ 


for TV, broadband and home phone comparison Of A ~~ 2 we 


wl 5 1; 
Pee sky O, BTe De Primus Talkl 
Experts available: 
Monday-Friday 8am-8pm, 4 
1 eo ° e y= 
Saturday 9am-5.30pm, Ss mn l Ff OL tal 
Sunday 10am-5.30pm l e l y Ol ® 
*20% of Simplifydigital customers received an average saving of £408. Data based on 1,538 records between Ist of Jan 2010 to 8th Nov 2010. ** Out of 445 consultations between 01/01/2010 and 03/05/2010, 368 Simplifydigital customers saved money by signing up to 
oO wnmended deal. Lowest Price Guar artee Terms and Conditions apply — see www. immplifydigta o 


».uk/lowest-price-quarantee for nai ets Standard $ SMS network charges apply. 


NEVER MISS AN ISSUE! 


ge netn 
DEVEL 


nets mitt de 
MANAGE 


#290 MARCH 2017 


We explore the design secrets 
driving major brands, share tips 
for futureproofing code, and dive 
into Adobe XD’s latest features 


HOW TO TEST 
FRONTEND 
CODEBASES 


to e 


"OLUW 


YOUR MINE 


SAVE UP 


#991 MARCH 2017 10 31% 


#985 OCTOBER 2018 


We explore the six main trends WITH A DIGITAL eT aT 
changing the face of UX, SUBSCRIPTION way we use JavaScript. Plus, top 
and introduce five steps to great tutorials from Generate speakers 


image management SEE PAGE 22 


GOT AN APPLE DEVICE? 


Download net’s digital edition for your iPad, iPhone or iPod Touch 


NETM.AG/NET-IPAD tux, NETM.AG/NET-IPAD-US (us) (@EEEEES 


CATCH UP ON ANY ISSUES YOU"VE MISSED BY DOWNLOADING 
QUR DIGITAL EDITIONS NETM.AG/NET-BACKISSUES 


so SOLE HOOK EXTHACT! 


¢ DESIGN 
net 
INTERFACE 


#989 FEBRUARY 2017 


We run down the design tools 
worth exploring this year, and 
show you how to get started 
creating a chatbot experience 


“geen he CREATE KILLER 

net 

WITH CSS 

‘ TOP NEW TOOLS 
rd | AIR FREELANCERS 


chet De 


#284 SEPT 2016 


We reveal the top 20 new tools 
for freelancers, the secrets of 
killer CSS layouts, and how to 
build a mobile app prototype 


FREE! 69-PAGE EBOOK 
net . 
THEVA WEB IS HERE, 


= 
#288 JANUARY 2017 


Take a dive into browser-based 
VR, learn the rules of responsive 
web type, and discover how the 
BBC keeps its sites fast 


| SAVESIT © SAVE $20 =] 


sourrine * 
net. WITH SERVICE 
Wines 


#983 SUMMER mt 


We run through the cutting- 
edge browser features you can 
start using today, and uncover 
eight hidden CodePen gems 


net 2 
> SUPERCHARGE 
| YOUR WORKFLOW.’ 


: m= “hi 
mon ame 


Li 
#287 DEC 2016 


We run down 22 tools and 
techniques you need to know to 


boost your efficiency levels. Plus: 


Best practices for great forms 


piscoven © 
THE POWER 
OF FLEXBOY 


net 
the 


APP 
#282 AUGUST 2018 


Jump into the future with 
progressive web apps, explore 
the power of flexbox and get 
acquainted with Angular 2 


PREFER 10 READ ON ANDROID, PC OR MAC? 


net is also available on Google Play and Zinio, as well as Kindle, Nook, Windows 8 and more 


NETM.AG/NET-GOOGLEPLAY 8 


115) 48-PAGE GUIDE 10 WORDPRESS 


~~ MASTER THE 
net 
A/BTESTING 
THE PERFECT WAY 
TO PLAN YOUR SITE 


#88 NOV 2016 


Dig into the science behind great 
design with a look at the five 
critical steps to planning a site 
and a deep dive into A/B testing 


= B stepsty 
ai 


MONE EY 


IS SUE 


#281 JULY 2016 


The Money Issue: Build a 
profitable business, supercharge 
your ecommerce site, and find 
the right pricing strategy 


NETM.AG/NET-ZINIO. 2 zinio 


SENONGO AKPEM 


Senongo is a New York-based 
designer, illustrator and art 
director. He's also the founder 
of Pixel Fable, a collection of 
Afrofuturist stories 

w: senongo.net 


Sensational design and superb development t @senongo 


Phe) to pick a CIGARETTES ARE 
HEALTHIER THAN REAL 
POmpany ONES 


« Enough chemicals to make one billion ecstasy pills were seized in 
the Netherlands i wee Scientists are squabbling over the best 


way to protest A wee Imagine being sent to prison for life. Now 


Hey, do you have” 
any idea what 
stick Dakota 
Johnson i is 


THEQUTLINE. COM 


Code and Theory www.codeandtheory.com 


>] The Outline aims to ‘tell the right without losing the global consistency “This isa refreshing 


stories for right now’. An in-house of the design aesthetic.” 


design team worked with New York- There are a number of repeated, take on conte nt 

based agency Code and Theory to design highly visible design elements, and design - taking the 

its striking site. pages with infinite scrolling mean the best ideas for mobile 
“We built a custom CMS so the mix of story and advertising can be and providing a really 

‘template-isation’ is quite smart and incredibly varied. The Outline team 


engaging experience’ 


easy to use,” says Stephane Elbaz, calls it “a real-time, highly extensible, SEYI TAYLOR (@SEYITAYLOR) 
design director for The Outline. “The extremely modern way of making things 

system Code and Theory helped us on the internet”. I hope other media 

put together gives a lot of options for companies give this deconstructed 

layouts and colours. It permits diversity platform approach a try. 
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The Long Haul 


1 ep pede 


$258, 000 


“Very cool! 
I like how 
it takes 

the time 

to simply 
present a 
story and 
help you 
understand 
the full 
impact of 
overfishing” 


STEPHANIE LAWRENCE 
(@SCLAWR) 


WWW. CONSERVECA.ORG 


Hello Monday hellomonday.com 


This digital story about tuna overfishing and conservation in the 


digital creative agency Hello Monday, the site has numerous small narrative 


Pacific (netm.ag/tuna-292) is a beautiful, if sobering, read. Created by 


details, with vertical pacing that ensures you have a forward point to focus 
on. Large, single images and galleries allow you to see life on the tuna 
boats, to understand the way the fishermen work and live, and the goals 
of the conservationists. 

At the beginning of each chapter there's a Campaign Status ticker 
showing the amount of money donated to this cause so far. This makes it 
clear the issue is not someone else's problem, and moves this project from 
simple storytelling to advocacy. 

“The Nature Conservancy needed a dynamic and flexible platform that 
presented their work through an immersive and story-driven experience. 
We wanted to trigger an emotional response in people, one that could lead 
to potential donations,” says Morten Sglvstrém of Hello Monday. 

One of the key challenges was to build a platform that was flexible 
enough to meet the content requirements, but could still offer an 
immersive experience with high quality images, video and sound. Naturally, 
this placed some boundaries on the designers. “The designer/developer 
alignment was key to the success of the project,” adds Salvstram. 


Beneath the Surface 
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Mukw 


20% Cecilie Me Maw Bats Avgust Grarup Marts 


CSS, HTML, TWEENMAX 


SUPERT6.DK/FILM/MUKWANO 


Stupid Studio stupid-studio.com 


ES This site for a film school from Stupid Studio has all the makings of a classic 
for typophiles. There is large, bold type, a simple grid layout, and a variety 
of animations that fire on scroll and on tap. The students page, in particular, uses 
a variety of image glitch effects as you scroll, blurring and shifting the students’ 
portraits in unexpected ways. 

Unusually, Stupid Studio has used full-width type on student pages. “It was 
actually discovered by accident,” explains partner Christian Mogensen. “As some 
pages didn’t have any photographic content we quickly came to the conclusion that 
lists on the site had to be driven by pure typography. At some point we just tried 
to reuse the big, fluid heading in a looping list and then it simply ‘clicked’. The huge 
repeating titles manifested themselves in a striking expression.” 

Many of the background images use warping and fade-in animations, creating 
water-like effects. “It was a no-brainer to combine the big typography with equally 
large images,” Mogensen explains. "The transitions between pages introduce an 
element of surprise to the otherwise static images.” 
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WWW.AGSL.CO.JP 


Studio Details www.details.co.jp 


This site for a drone manufacturer 
in Japan features some ridiculous 
WebGL animation and photography. 
I asked Tomoatsu Hattori from Studio 
Details - the team behind the site 
- about the challenges of displaying 
and rendering all this animation. 
“Changes may occur depending on 
the environment,” he says. “It was 
hard to control the cross-browser 
animation which expresses scroll such 
as parallax and the axis.” The animation 
is controlled by JavaScript, with different 
branches processing the animation for 
each browser. The result is a series of 
chained, wonderful effects. 


CONTROL ALGORITHM 


BUMBOTA IVA 
oe 


AUTOPILOT TECHNOLOGY 


The site offers viewers an almost 
dizzying array of visual features and 
even the ability to ‘fly’ a drone through 
the city of Japan. It’s difficult to pick 
a favourite page. 

So what was Hattori most proud 
of? “WebGL is often avoided in 
website production due to high device 
requirements and load times in Japan,” 
he says. “We are proud that we were 
able to successfully balance WebGL 
and JavaScript.” 

Each visit to this site gives you a new 
angle to explore, just like the experience 
of flying one of the company’s drones 
might offer. 
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TOPOTOPO.10 


HUSH heyhush.com 


S TopoTopo is a digital puzzle game that lets you create 
a 3D topographical model of any location on earth. You 
can then share it on social media, turn it into a puzzle, or even 
3D print it. New York-based agency HUSH were tasked with 
putting it together. 

“TopoTopo connects us with our own sense of place, 
providing us with context for our experiences. We love 


connecting technology, science and people’s imaginations,” “This inttoduces kids to open source 
says partner David Schwarz. “It’s is a unique and fun way 3D printing and adds a layer of 
) 


to learn about real-world geography.” : : 
The site runs off open source data from the Shuttle authorship to the already active play 


Radar Topography Mission, which is mixed with the Google of puzzles — a great idea!” 
Maps API to create a topographical database of all places BRIAN LAROSSA (@LAROSSA) 

on Earth. With a stripped-down interface and simple 

animations, this site is a clever way to look at all your 

favourite places on Earth. 
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THREE.JS, JQUERY, HTML 


GEMSTONES. ELESPACIO. NET 


‘  Elespacio www.elespacio.net 


2) Your planet's four moons are its main source of energy, but they have 
been destroyed due to excessive mining. The only way to bring them 
back is to find the four Gemstones hiding amongst the moons’ ruins and 
restore the balance on your planet. The stones are hidden amongst asteroid 
fields. Find the right point of view to align different asteroids into the indicated 
geometric shape. The Gemstones will then reveal themselves. 

“We were inspired to do a project without the usual creative constraints 
of day-to-day client work,’ says Emma Dowuona-Hammond of Elespacio, 
the agency behind the project. “We wanted to output something different 
and decided on a puzzle game with a unique twist on the game mechanics.’ 


For inspiration, the team looked to the mechanics of Monument Valley, and 
o & 4 the striking use of colour and stylisation in No Man’s Sky. 
“We are used to designing websites or online ads, so designing a game 
required a completely different process. We also wanted to implement new 
P technologies that were unknown to us before,” adds Dowuona-Hammond. 
\ “The most challenging aspect ultimately was coding and modifying shaders, 
and using them along with the library features. Another challenge was to 
seamlessly combine 2D and 3D worlds’ 


elespacio . 
CUBETHEON 
=o 
nN “e 
s ‘ GEMSTONES | ~— 
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Future Entities 


Unbounded 


EMERGENGE. 
MAXCOOPER.NEI 


Engine thisismyengine.com 


>] The site for the upcoming Max 
Cooper album Emergence is a joy of 
minimalism and gorgeous visuals. As 
not only a musician but a doctor of 
computational biology, Cooper wanted 
to create a site that served as a guide 
and companion to his live shows. 

“Max has got such fantastic visual 
imagery, we let that be the star and 
kept the interface as clean and minimal 
as possible,” says Henry Gibson from 
Somerset studio Engine. 

The aim was to cater for both casual 
visitors who might not know Max 
Cooper’s work yet, and the artist’s core 
fans who wanted an in-depth resource. 
“We also wanted to retain the structure 
of the show and the flow of the pieces 
from one to the next,” adds Gibson. 

“So we tucked away all the content, 
accessible to those who want it, but 
easily passed by for those who don’t.” 
While there will be more videos released 
in the future, it’s easy for visitors to see 
what is currently up. 

A nice touch is that the site listens 
for video playback events, and as soon as 
a clip finishes it scrolls the viewer down 
to the next video, which automatically 
starts playing. “This hopefully retains 
the sense of collection and feel of the 
album and show,” says Gibson. & 
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FOOTBALL PLICHES 


EVERY DAY! 


ee Uh Ue ee 


x 
x, 


which provide wood for making paper and many other products, 


¥ 
Did you know that European forests, than 1,500 football pitches every day! 


have grown by 44,000km:? over the past 10 years? That's more 


——E 


_ Love magazines? You'll love them even more knowing they're 
made from natural, renewable and recyclable wood 


OO [=] "UNFAO, Global Forest Resources Assessment 2005-2015. There are some great 


Two Sides is a globo! initiative promoting the responsible reasons to #LovePaper i 
use of print ond paper which, when sourced from : ver the ow 

[=] certified or sustainably managed forests, is o uniquely Disco m Now, 
powerful and natural communications medium, twosides.info TWO SIDES 


Sublime design ! , AS E 
& creative advice 


THIS MONTH FEATURING... 


Designing 
brand 
Identity 


FOCUS ON 57 
It's good to revisit your favourite design books 
and soak up as much information as possible. 
Sam Kapila showcases her favourites 


We talk to UI designer Jan Losert about his 
career to date, and how he is helping shape 
the future of mobile advertising at Tapdaq 


is ‘= 
HOW WE BUILT 64 
We take an in-depth look at how Brighton- 
based digital stars Clearleft revamped its own 
web presence from the ground up 


DESIGN 


CHALLENGE 


PROFILES 


This month ... 


BOAT HIRES 
ie BARBARA MARGANTONIO 


’ t) Barbara is a freelance UX/UI designer. She 
works with digital agencies all over the world 
w: dribbble.com/grarighe t: @grarighe 


PETER JAVORKAI 


Peter is a Ul designer and creative athlete at 
the Adidas Group 
w: peterjavorkai.com t: @javpet 


ELLIS ROGERS 


Ellis is a graphic/web designer from Milton 
Keynes, England 
w: ellisrogersdesign.com t: @EllisDesigner 


HW saier 


This month we'd like you to design a website for a boat- 
hire company. It could be a small company that hires 


out narrowboats for use on the canal that goes through 
your village, or a big organisation that lets you charter 
yachts somewhere fancy; the choice is yours. 


@~ Picks 


= 


62990 Bem yer Norw 


sone 


BEST OESTINATIONS THas SUMMER 


SAILAWAY 


@ SAILAWAY 


Beneteau Oceanis 48 


‘ A/T? Ger 


OVERVIEW 


SailAway is the hassle-free booking option for people that want to enjoy sailing without having any experience 


oF 


Many people think that a sailing holiday is 

too complex to organise. You need a licence, 
experience, sense of direction and knowledge 
about boats. So how do you make sailing more 
accessible for everyone but mostly first-timers? 

This company helps you find the right boat for 

your needs by selecting the purpose of your trip 
and provides you with all-inclusive packages 
(skipper, meals, drinks, Wi-Fi and so on) as 
well as itinerary suggestions around the area of 
interest. On the boat page you can read about 
and contact the skipper that will accompany you 
during the trip. The design is focused around 
an easy-to-use search and a guided browsing 
experience through recommendations (including 
Our Picks, Best Destinations and Reviews). The 
language is simple and avoids technicalities. 
Glossy pictures, lovely icons and simple intuitive 
design with great contrast makes the booking 
process easy and delightful so that your relaxing 
holiday can start right away! 


Q CLOSE UP 


(1) The website lets you first pick the purpose of your 
trip (party/family holiday/romantic getaway/sport and 
so on), which is represented by a nice illustration, as well 
as aregion, date/duration of the trip and the number of 


passengers. Search results can be filtered in the next step. 


(2) Recommendations are based on user reviews on boats 
and locations. (3) Recommendations can be browsed with 
left and right arrows. (4) On the Boat page the search 
criteria is always editable without needing to go back to 
the previous page. (5) By clicking on the skipper's avatar 
you can access the full profile and contact him/her for 

any query. (6) The page is split into two with information 
about the boat and possible itineraries around that region. 
(7) This boat overview is a glossy image gallery (swipe left 
or right to see more) and boat details with only the bare 
essentials. All boat technicalities can be discovered by 
clicking on More. (8) The sticky footer has the Total and 
Book Now call-to-actions always visible while tabbing 
between the Overview and Itineraries. 


MY MONTH 


What have you been 
doing this month? 

I've been travelling 
around SE Asia, 
drawing comics, writing 
and making videos 
about my journey. 


Which sites have you 
visited for inspiration? 
Instagram, Dribbble, 
Twitter and YouTube. 


What have you been 
watching? 

| watched the very 
disappointing last 
season of Sherlock as 
well as way too much 
Japanese anime. 


What have you been 
listening to? 

| have just listened to 
Radwimps’ Kimi No Na 
Wa soundtrack pretty 
much constantly for the 
last two months. 
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MY MONTH 


What have you been 
doing this month? 

I've created my 
brutalism design 
portfolio. Now I'm 
improving my coding 
skills and reading about 
Al for our dating app. 


Which sites have you 
visited for inspiration? 
I live in Amsterdam, 
so all | had to do was 
go out to the dock for 
some boat inspiration. 


What have you been 
watching? 

Streamed some Twitch 
and TED videos. 

Can't wait for the next 
season of Silicon Valley. 


What have you been 
listening to? 
Devlin’s latest album 
just came out. 
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Where do y want t gil frore Wher 


Split, Croatia Embark 


Available boats - from 75€ / hy 


Motorboat Quicksilver 


Motorboat Chapparal 


102€ 75€ 


Most popular eapenences in the ares 


ai 
AnOY! 


os 


Sun Odyssey 349 Bavaria4t 


Disembark 4 guests 


96€ 210€ 


A site that connects private boat-owners with those looking to rent them 


eS Ahoy! is like an Airbnb for short-term boat 
renting, whether you are an owner of a 
huge yacht for parties or running a local boat 
renting business to the closest island, it’s open 
for everyone. The web app is location-based, so 
the users are always getting the available boat 
offers from their current surroundings, but they 
can also search manually of course. 

The app provides rich offline experience as 
well, so for instance a family can download 
the data for free at the hotel and then they’ll 
be able to find all of the best boat deals right 
there on the shore without eating up their data 
plan. Thanks to the service workers the users 
can also receive some exclusive last-minute 
notifications, which might help to fill up those 
empty seats. I chose different hues of aqua 
blue as the main colour and an orange gradient 
as an accent, which harmonises well with the 
uploaded boat content. 


Q CLOSE UP 


(1) The users’ location is indicated with a pulsing mark, 
making it easy to follow their current position and the 
closest docks with available boats. (2) The bright action 
button holds the primary actions, which gives more space 
for navigating, and has an overview of the customised 
Google Map. (3) The greatest experiences by boat are 
just one tap away! The ratings and categories help future 
travellers to visit mind-blowing spots in the area with 
directions. The system smartly filters the sights by 
reachability and current weather conditions. (4) What 
about the non-travellers? It’s easy to register a boat or 
yacht with the simple step-by-step signup, and then it's 
time to set sail and receive passengers from all around 
the world. (5) The orange bubbles with numbers help 
users to find a port with all of the available boats and 
captains nearby. (6) After filling in the details about the 
dream journey, the system automatically offers the best 
available options, also highlighting the best deals. 


- BESPOKE LUXURY BXPERIENCES 


Handpicked #ip erafioe: oot@ y Ot Beriaet holiday 


ELIZABETH 
ROSE 


ELIZABETH ROSE 


A site that conveys a high-end brand and targets young professionals 


DESTINATIONS 


al 


Ps] Elizabeth Rose is a key player in the sailing 
industry. Established in 1990, it offers a 
professional, unique and bespoke sailing 
experiences worldwide. Elizabeth Rose’s website 
focuses on strong bright photography to 
showcase their services and destinations. I 
wanted this site to feel minimal yet high-end to 
appeal to the target audience of young 
professionals. This has been achieved by using a 
very simple colour palette, simple imagery anda 
heavy focus on responsive layout for those on 
the go using mobiles and tablets. With this in 
mind, I wanted to create the feeling of 
relaxation with a full-screen background video 
with very minimal movement and a calming 
sea. Each of the slides would showcase a 
different destination or service that Elizabeth 
Rose offers. The website will feature a sticky 
navigation so that users can quickly navigate 
throughout the site to avoid scroll fatigue. 


Q CLOSE UP 


(1) The clean, modern logo defines the company's core 
values. (2) A minimal, full-screen background video 

slider showcases the different services and destinations 
available. The slider contains a marketing message about 
each service and uses Lato and Montserrat fonts. (3) 
The homepage contains several call-to-action buttons 
related to each section. The buttons are dynamic and link 
directly to the destination in the video. (4) Each different 
background section has a coordinate of the location to fit 


into the theme of sailing. Each coordinate is dynamic and 
displays the correct location of the destination. (5) Under 
the banner is a full-width ‘about us’ hero which describes 
the company's ethos with space for a rolling banner for 
more destinations. (6) The main navigation is a fixed sticky 
header, allowing for easy navigation without having to 
continuously scroll up to get back to the navigation. On 
mobile, the navigation will become a hamburger menu to 
accommodate for the smaller mobile or tablet sizes. 


BESPOKE LUXURY 
EXPERIENCES 


CARLTON 


MY MONTH 


What have you been 
doing this month? 
Developing a personal 
website/blog for 
freelance work, 
researching motion 
graphics to create a 
simple website and 
promo animations. 


Which sites have you 
visited for inspiration? 
Reddit, Apple, Google 
and Pinterest. Also 
looking for websites 
that break boundaries 
on Awwwards. 


What have you been 
watching? 

Taboo, Atlanta and Game 
of Thrones. 


What have you been 
listening to? 

Chance The Rapper, 
Childish Gambino and 
Arctic Monkeys. 
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The number one destination 
for web design news, 
views and how-tos 


Get Creative 


Blog direct to 
your inbox with 
our weekly 

web design 
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freelancers 


(1) CREATIVE BLOO 
Graphic design | Art 3D | Digital art 


www.creativeblog.com 


MUST-HAVE BOOKS 


Sam Kapila suggests some books to improve your problem-solving 


On a rainy day, when time permits, 

I try to curl up on the couch witha 
nice design book. It’s a good habit to get 
into to read or re-read certain design books 
and soak in the process side of things. It’s 
self-care. Rarely during deadlines do we get 
to grow ourselves as designers. While we 
continue to learn, adapt and be agile during 
a project, we don’t always have the luxury, 
timeline, or support from clients to learn 
and grow our processes as designers 
and developers. 

When we consider design projects and 
process, I think a lot about timelines and 
stages, but mostly I think about problem- 
solving. That’s what we’re doing, after all. 
Here are some books that will help you 
re-evaluate and improve your problem- 
solving process. 

Sprint (netm.ag/sprint-292) from GV breaks 
things down into five phases over five days: 
Map, sketch, decide, prototype, test. The 
book does a good job of encouraging the 
reader through such a sprint. 

Org Design (netm.ag/org-292) is often ; _ 
recommended as a book about building the real experts —in real time. 
right organisational structure, from topics far, now includes training 
like recruiting and hiring, all the way down a 
to interactions with non-design teams. 

One book I come back to often is Designing irda ot nar 
Brand Identity (netm.ag/identity-292). This fas enee Oats apa 0%6 
book has followed me for years since Org paar rea 
school, with occasional edition updates. = = 
It’s a must-have guide that goes through 
every touchpoint of brand identity, and how 


Alina Wheeler 


Designing 
Brand 
Identity 


JAKE KNAPP 


Org Design for Design Orgs 
Buliding and Managing In-House Design Teams 


By ates Weare me 


Read on Safari witt 
10-day free trial 


few: $25.99 


fom O4 a ee 


Oem) ae Man he ey an DEEN LOD ar KEY 6 LETC Od (apy EwEnY 

Re e epee Bed CORD BP Eng he ictuten 9 Siretege Conversations bow! 

We taht ret er on Vat eer T am Ut marey dite Tred ad AD Oe Print & Ebook: $32.99 
DUM © ovet Oger EATEN: Ces learn a 


it carries into messaging, UX, competition, Po mie $29.99 
and even favicons. 
(1) Sprint: How To into GV's famous Guide for the (3) Org Design for 
Sam omeiaeua adeaene Solve Big Problems Sprint process. Whole Branding Design Orgs explores 
living in Texas and an instructor and Test New Ideas (2) Alina Wheeler's Team covers how to build the 
at The Iron Yard, an international, in Just Five Days Designing Brand every branding right organisational 
a Os immersive coding school provides an insight Identity: An Essential touchpoint. structure. 
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ld inro 


Location: Prague, Czech 
Republic 


Designing since: 2010 


Areas of expertise: Dashboard 
design, web design, visual 
design, UX, UI kits 


Career: Tapdagq, Badoo, 
Social Bakers 


JAN LOSERT 


tapdaq.com 


The lead designer at Tapdag tells us 
about his digital products and his 
nomadic lifestyle 


S The lead designer at Tapdaq (tapdaq. 
com), which is an in-app advertising 
platform, Jan Losert (janlosert.com) has 
covered a lot of ground since dropping 
out of university in 2011. That’s not 
solely in terms of his career though, but 
also in terms of the actual miles that he 
has travelled whilst working; he’s an 
incorrigible global traveller who works 
almost entirely remotely. 

We were lucky enough to pin him 
down, just days before he set off on a two 
month round-the-world trip, and ask 
him about his work, his product-design 
process, his sideline in digital products 
and of course his nomadic lifestyle; 
here’s what he had to say. 


Can you tell us a bit about your 
professional background? 

I’m originally from Prague, the capital of 
the Czech Republic, where I’m currently 
living now. I started working in design at 
the age of 18 when I used to play with 
photo manipulation in Photoshop. I 
dropped out from university after three 
weeks and I then decided to try my luck in 
design as a freelancer. Long story short: for 
the last four years I have been in a constant 
process of designing dashboards and 
applications. I have learned a lot about 
how to deal with different approaches in 
order to make product designs both better 
and more efficient. 


Tell us a bit about Tapdaq. 


About the time when I was thinking about 
new challenges outside of my previous job » 
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at Badoo (badoo.com), this guy Ted reached 
out to me about his startup called Tapdaq. 
After a few conversations I found out not 
only about what my position would look 
like in the company but also who these 
guys are, what their vision is and how huge 
this could be. Later that year I ended up in 
a situation when I had to choose if I wanted 
to go work at Flickr or to work with three 
guys and try the start-up life from the 
company’s early days. After considering 
everything I decided to go with the idea of 
starting from scratch and design 
everything in the company, so I started 
working at Tapdaq. If you asked me to sum 
up Tapdaq in a single sentence, it would be 
that we help app developers maximise 
their revenue with unbiased ad mediation 
and retain their most valuable users 
through powerful cross-promotion. 
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Design assets Jan's most successful product — Dashboard UI Kit — is a huge pack focusing on designs for 


dashboard user interfaces and web applications 


What does your day-to-day work at 
Tapdaq involve? 

As the only designer at Tapdaq I’m 
responsible for everything. What people 
usually don’t realise is that everything 
really means everything: from the 
dashboard and landing page over to 
example ads for our clients, pitch decks or 
sometimes even social images. We start 
every day with a team stand-up to keep 
everyone on track and talk about our wins 
and changes. Then I usually spend the day 
working on designing new features (new 
screens) or by watching user sessions on 
Inspectlet. This awesome tool helps me to 
understand where our users are struggling 
and how I can change the design based on 
their behaviour. 


What are you working on at the moment? 
In Tapdaq we’ve recently launched our new 
main feature - Mediation. We are currently 
in the process of understanding the 
impact, preparing and optimising the 
onboarding process for all users who are 
starting to use it. I’m also starting to work 
on my second-year overview of Tapdaq 
designs as my next Behance project. 


You’re very active on Dribbble and 
Behance; are these useful mediums for 
you as a designer? 

Dribbble has helped me to get where I am 
now. When you pass the point of, say, 


2,000 to 3,000 followers you’ ll start 
receiving five or more work offers/project 
inquiries every week. I wouldn’t have had 
the Badoo offer without Dribbble, I 
wouldn’t have been contacted by Ted 
(Tapdaq CEO) and I wouldn’t have visited 
Yahoo for an interview with Flickr without 
the magic Dribbble Hire Me button. I think 
the most important thing on Dribbble is to 
really show your areas of specialisation. 

I use Behance to show overviews of full 
projects. So] take ten Dribbble shots and 
merge them into a Behance project in 
some way. It always works for me to 
describe what I’ve done and why I’ve done 
exactly that in these overviews. It’s alsoa 
great way to show potential clients or 
companies your way of thinking and 
exactly how you approach projects. 


Your working style is extremely nomadic; 
how does that work for you? 

When I had my first talks with the future 
team my main requirement was to accept 
me as fully remote employee. Mainly 
because I wanted to move back to Prague 
and start travelling. I fell in love with this 
lifestyle! For the past two years I’ve been 
sitting in different coffee shops in cities 
around the world pushing rectangles in 
Sketch. I’ve visited 25 countries in the past 
two years and I’m starting to get worried 
about if I’ll ever be able to get back to 
normal nine-to-five work life. 


Placing priority Jan's early side project, Placeist, works as a bucket list of places to visit all around the globe. 
He designed this colourful platform to enhance travel with gamification 


Tell us about your 26 Steps of Product & 
Dashboard Design. 

This breakdown (netm.ag/losert-292) is sort 
of my update to a previous article ‘14 Ways 
of Product Design’ which I wrote two years 
ago. I provide all the info about my view of 
the optimal process to follow in every 
product team, from the start of the project 
to the final implementation and to the way 
to test the results of your work. 

It’s been one of the top 25 articles per 
day on Medium for six days in a row. So far 
it’s been viewed over 90,000 times and got 
over 2,000 recommendations, which I 
guess is quite amazing. 


Your previous job was with Badoo; could 
you tell us about your work there? 
Badoo was my first job in London and 
actually my second full-time job. I started 
as a junior designer and worked on all 
types of various tasks that were required. 
Since Badoo had five designers for their 
two products and web, we were all working 
on various screens/tasks for each of those 
sectors. I was always chatting with our CTO 
about the dashboards I was working on for 
my clients and one day the design team got 
a request to redesign our internal support 
interface (customer care). Ideal for me! 
Since most of the customer team were 
in-house I sat down with each member of 
the team to understand every pain and 
problem of the existing interface (which at 


that point was still developed in HTML 
tables). We sketched out our ideas, wrote 
different types of user stories/approaches 
and then I moved over to Photoshop and 
prepared some possible solutions. We then 
discussed and tested this with different 
members of the team. Later on in the 
project I managed the whole dev process 
and I was even able to lead one of my first 
user sessions and play with the fully 
working prototype. I’m really glad that I 
was able to take on this project at that 
point of my career. 


You have a sideline in digital products; 
tell us about your Dashboard UI Kit. 

A year ago I was marking most of my 
emails as read and just stacking them into 
a folder with potential future work. Most of 
these emails were coming from clients 
who wanted help with their dashboard 
projects. At that time I came up with my 
first successful digital product - Dashboard 
UI Kit. Pve made some research and, 
except for a few packs of three to six 
screens, there was nothing on the market 
similar to the idea] had. When I started 
designing and preparing concepts I went 
crazy and turned this little idea of a few 
screens into creating a product full of 
designs where everybody (not only me) can 
prepare their own dashboard designs. I 
came up with over 100 files for dashboard 
design (including the new 2017 update). 


> 


CI 
OFFICE CULTURE 


JAN LOSERT 


What's on your desktop? 


Wacom tablet, chalkboard globe, cinema 
display and a mug with ‘Don’t fucking 
procrastinate’ written on it. 


Little things that make your 
life worthwhile 


My Crossfit training in the morning, days 
when | release something new to the 
world or post something on Dribbble 
and definitely every day | spend ina 

different country. 


What will you do for lunch? 


I've recently started to live healthy so I'd 
say salad or some decent pasta. 


What hours do you work? 


I'm in constant process, | think about 
design all day. But | usually become 
super productive between 8pm to 3am. 
All the best projects of mine happened 
during the night. 


What else do you do 
in the office? 


Shoot Nerf guns at my colleagues. | love 

our WHL and Rocket League nights in the 

office. Every two months we also try to 
solve quests in Escape Rooms. 


How often do you hang out 
with other designers? 
From time to time. | recently started to 
join calls with other designers from 
around the world and talk about their 


work or my design problems and hear 
other's thoughts on design decisions. 


Describe your working culture 
in three words 


(Please) Start before sunset. 
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A look at the key dates in Jon 
Losert's history 


Lands first web design project 
Vv 


OCT 2011 


Got his Dribbble invite 
Vv 


AUG 2012 
First job/first dashboard projects 


Vv 
JAN 2013 


Became fully focused on rich web 
applications/dashboards 


Vv 

SEP 2013 

Joined Badoo and moved to London 

Vv 

AUG 2014 

Joined Tapdaq as a lead designer 

Vv 

DEC 2014 


Leads every design decision in every 
Tapdaq product 


Vv 
JAN 2015 


Became fully remote — spending every 
month in a different country 


Vv 
FEB 2015 
Created first Ul kit — Night & Travel 
Vv 


MAR 2016 


Released Dashboard UI Kit 
(sold over 1,500 licences) 
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People are still sending me requests for 
additional screens and sending thank-you 
emails after the purchase. This really 
makes me want to get up every morning. 


Tell us about another of your side 
projects: Placeist. 
Placeist was one of my earliest side 
projects. One day I was browsing the 
internet at work and I stumbled upon an 
article called ‘The 100 Most Beautiful 
Places in the World in Pictures’ on 
escapenormal.com and I loved it. Ever since I 
found it I’ve been eager to visit at least two 
of these locations per year. The idea 
behind Placeist was simple: a bucket list of 
places all around the globe that you can 
check and mark as visited and share with 
the world. The whole platform should have 
gamified travelling to these locations. 
Sadly before we were able to finish it, my 
friend (the developer) and I joined Tapdaq. 
But at least I’m trying to actually visit 
those places in real life. 


What do you get up to when you’re not 
working for Tapdagq or on your products? 
Hah, I always feel I’m in a constant process 
mode even though for those who know me 
it’s impossible to understand that. So even 
in my free time I like to take on some side 
jobs to keep myself busy and keep on 
working on something new. I recently 
started going to Crossfit, which is 
definitely one of my best decisions in 2016. 
I was always struggling to push myself in 


the gym, but when you’re surrounded by 
like-minded people and coach you can’t 
really slack off during your workout. I 
guess that’s the same in everything, even 
with design. 


What advice would you give to anyone 
starting out in product design? 

I think the only advice is to try and test and 
always share your results, struggles and 
wins on social media. Don’t be afraid to 
put stuff out and ask for feedback. If you’re 
struggling to find good developers to help 
you with execution you can always just 
design your project and share it with the 
world through Dribbble or Behance. But to 
get yourself to the next level, work on the 
full project; design everything from the 
nice stuff to log-in forms, settings or 
payment screens. This will help you grow 
and learn about consistency and style 
guides, and help you to think about the 
whole design and development process. 


What do you love most about your work? 
I truly like the freedom. Being remote with 
a team that trusts you gives all of us 
freedom to work and at the same time not 
be worried about missing on life. I love one 
quote from the Weebly office in San 
Francisco which said: ‘Work when you 
want, take days off, just get things done’. I 
think that really summarises the future. 


Next month: Hillary Clinton 
campaign designer Mina Markham 


| THE WORLD'S LEADING DESIGN MAG | 


WIAA) ONE OF FIVE COPIES OF GBS NEN PROWOGRAPTA — NORTH E2S 


. WA 
COUMPVATR RSs ON SALE 


\S) 


SUE UE 
ee 
WRI 
BH = WNW 
PWN 
WL 
WORK WITH 
‘ CONTRAST sd 
" 
4 
4, 
, USE a ; 


' 
b 
f 
4 
, 
f 
, 


€? 6 
KET Re 
A mine 


SHOWCASE 


CLEARLEFT.COM. 


With an evolved company focus and a rebrand, Clearleft bit the bullet and 
completely revamped its web presence. We take a look inside 


Create a 
new universe. 


now who you’re 
orking with. 


Q CLOSE UP 


The challenge for Penguin eryer 
Random House & => positive difference 


Let's make a 


BRIEF 


Following a rebrand, Clearleft needed 
to rework its digital presence. Using 


(1) Our new logo has a hand-drawn element. 
We've been exploring this style in visual 
devices, including shading behind profile 
pictures and images that lead the eye. (2) We 


a proposition statement, storytelling 
principles and a collection of user needs 

as its set of hypotheses, Clearleft built a 
whole new site reflecting its updated focus. 


use an assertive tone to communicate key 
messages with clarity and purpose. (3) This is 
anew storytelling device that zooms in on the 
action. Designed on the principles of ‘Focus 


on the lovable details’ and ‘Show us doing the 
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things we love’. (4) Working with illustrator 
Kyle Bean meant interrogating our story to 
get to the crux of it. His models marry with 
the language to give abstract concepts new 
clarity. (5) Beneath the surface, we have 

an intricate data model. This helps us with 
searchability and groupability, for example 
in gathering ‘service’ or ‘sector’ content in 
future iterations. 


JON AIZLEWOOD 


ELLEN DE VRIES 


GRAHAM SMITH 


Jon is senior visual designer 


fe 


Ellen is Clearleft's content 


Graham works as Clearleft’s 


at Clearleft and pays special strategist and digital chief code warrior and he also 
attention to design systems storyteller, she loves making has a serious gaming addiction 
and style guides. patterns with language. to boot. 

t: @aizlewood t: @eldevri t: @gablaxian 


> In the latter half of 2015 Clearleft 
(clearleft.com) decided that 

the time had come for a complete 
overhaul. Still very much a user- 
centred design agency that helps 
clients design and redesign digital 
products and services, today Clearleft 
often works in-house (even with 
clients located in India or the 
US), looking at the fundamental 
infrastructure of its clients’ digital 
worlds and offering strategic 
consultancy. To reflect the change in 
its focus, Clearleft required a rebrand 
and, to go with it, a new web presence. 


net: Can you tell us how the old Clearleft 
site was falling short? 

EDV: There was a big gap between 

the nature of the work we were doing 
with clients and the story that our 

old website told. We wanted the act of 
redesigning the site to be an exciting 
opportunity to take a dose of our own 
medicine, including building the site 
using a pattern library tool called Fractal 
(a product that Mark Perkins has been 
building at Clearleft). As a result, the 
website you see today is a testing 
ground for us, as we experiment and 
play with it. 


net: Was the rebrand a separate project 
from the site redesign? 

EDV: The rebrand project began first; 
it demanded that we take a long look 
in the mirror and try to articulate our 
new proposition, our attributes, our 
archetypal traits, our purpose and 


our differentiators. You can now see 
elements of the brand story bubbling up 
across the entire site; from the bold tone 
of voice for headings on the case studies 
to the dotted patterns in the page 
backgrounds. The brand and the website 
naturally have a kind of symbiotic 
relationship, where one cannot exist 
without the other to test it. 


net: Did running a rebrand alongside a 
redesign make things much easier or 
more difficult? 

JA: In many of our clients’ cases, we 
often have to look at new permutations 
of the visual brand as it translates 

into digital components. So creating a 
site at the same time as evolving the 
brand was nothing new for us. A digital 
rebrand of this type demands plenty 

of time for contemplation, as well as 
face-to-face collaboration. We’re a small 
company with a high concentration 

of practitioners, so finding that time 
between client projects to get everyone 
in a room together was probably our 
biggest challenge. 


net: Part of the process was a hack week; 
can you tell us about that? 

GS: There are two main challenges that 
a small agency has to overcome when 
designing its own website. One is to get 
a fresh perspective and see it from the 
outside. The other is to resource a team 
so that they can work together in one 
room for long enough to get the designs 
up on their feet. So then we took the 


team to work off-site in a room at alocal » 


Key dates in the Clearleft 
website revamp 


We research our visual and verbal brand 
language as part of the rebrand. 


Vv 


We conduct stakeholder interviews (on 
ourselves) and collate the findings. 


Vv 


APRIL 2016 


We flesh out brand, personas, user journeys, 
messaging and tone of voice. 


Vv 


Hack week: collating discovery findings, 
creating principles, refining the project 
canvas, sketching. 


Vv 
OCT 2016 
Case studies are pieced together. 


Vv 


We create the underlying infrastructure for 
the IA to futureproof the site. 


Vv 


We put Fractal to use and create the 
components for our pattern library. 


Vv 


We piece the pages together in Craft CMS. 


Vv 


We open up our work to the wider world, 
with many more releases to come. 
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Clearleft shows us the sketches and 
photography that made the new site possible 


(1) During an immersive hack week we looked at 
inspiration and sketched out various areas for the site. 
(2) We examined aspects of the visual language including 
typography, application of the brand and how we 
represent individuals. (3) We explored our case studies in 
depth, asking compelling questions that resonated with 
our personas and matched their needs. (4) We revamped 
our in-house photography by creating a brief and 
shooting it all ourselves; a huge upgrade on our existing 
site. (5) We iterated through loads of designs while 
maintaining the basic visual language — strong 
typography, minimalist and confident. (6) Elements of 
the brand story bubble up across the website, including 
the bold tone of voice for headings on the case studies. 


Focus on the 


intelligent 
story. 
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p> start-up venue. During that time we 


got everything up on the walls and we 
nailed down our direction. When you’re 
all sat in the same room, you begin to 
think differently. It becomes a group 
effort; everyone is there to remind one 
another of the needs and requirements 
that might be overlooked if we were 
working separately. 


net: Can you talk us through one of the 
site’s new design features? 

JA: Since the beginning of the work, 
we'd been playing with this idea of 
being ‘makers’ and ‘consultants’. We 
wanted to use strong and bold imagery 
to give shape to this idea, to keep our 
work grounded in reality, and easy to 
grasp. We played with diagrams, double 
diamonds, sketched pictograms and 
squiggles. But late in the day we decided 
we wanted something completely 
different; so we started working with 
Kyle Bean, whose amazing real-life 
models have been used to illustrate 
complex concepts for various eminent 
magazines, including this one! 


net: What interesting technologies do 
you have running the site? 

GS: Fractal is a tool that most closely 
aligns with how we work. It was built by 
Mark Perkins, one of our in-house devs. 
It’s an open source tool which manages 
one of our primary deliverables; a 


Collaboration With availability sometimes an issue, 
collaboration was key throughout the project, 
ensuring a shared understanding across the team 
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Team effort We put a lot of trust in our team, so wanted to reflect their personalities 


and strengths across the site 


pattern library. By using it for our own 
project we are able to be on the receiving 
end of this deliverable, allowing us 

to better understand the problems 
integrating patterns into a system 

can bring and, hopefully, improve our 
process as a result. 


net: Did everything launch on schedule 
and to spec? 

EDV: When it’s your own project, the 
schedule becomes elastic. In our case 
that elastic has been through the 

wash a few times and is now pretty 
loose. Because there are no client 
dependencies, the issue of a launch date 
was an interesting topic of debate that 
became almost philosophical at times. 
When your heritage is ‘web’ and your 
practitioners are working on client 
projects at the top of their game, the 
pressure to ‘shine’ is at times the 
biggest hindrance to getting it live. As 
Jeremy Keith says, “It’s the web. It’s 
built to change. Let’s make it live, so 
everyone can see what we’re doing, then 


we can play with the other stuff later.” 
So we did. 


net: What’s the biggest lesson you 
learned during the project? 

JA: We’ve learned now that building 
one’s own site is hard. We could have 
hired an agency, or assembled a team of 
freelancers to ‘get it done’. But we would 
have missed out on the opportunity 

to dive so deeply into our identity, 

our sense of purpose and answer 
fundamental questions about ourselves. 


Despite the length of the process, 

and the time it took to build a visual 
language for the new brand, we now 
have a very satisfying starting point. 
Our next steps on the road map are to 
refine what we have done, to investigate 
the choreography of animation and 
then to add our extensive library of 
knowledge resources. 9 


» Next month: Digital innovation 
agency This Page Amsterdam 
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Follow Nick Babich as he 
explores solutions that 
will help you create great 
mobile experiences 


hat makes a good mobile 

app? The answer is simple 

- design. Good design has a 

clear focus on key users’ goals 

and removes all obstacles 
from their way by bringing clarity into 
user interface. But creating good design 
isn’t an easy task. To help you create 
really great mobile user experiences 
we’ve prepared these design principles. 


The first-time experience with your 
mobile app has to be good in order for 
users to engage further. There is only one 
chance to sway someone into becoming 

a user, because if you disappoint them 
the first time, you can be sure with 80 
per cent confidence (goo.gl/EAcgBX) they ( 
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won't be back. 


AUTHOR 


Asoftware developer 
who is passionate 

about user experience, 
Nick's recent projects 
include user interface 
redesigns of the 

iOS apps Notes 
and Messenger 
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p> Make onboarding beneficial 


for your users 

Onboarding is a process of learning 

what the product’s capabilities are and 
how to use it. It can include a variety of 
techniques to keep users engaged during 
their first time, but it should only be 
employed if it’s really essential for first 
use. The trick with onboarding is to 
show just what users need to know to get 
started — nothing more, nothing less. For 
instance, Duolingo uses onboarding as 
building an entry ramp for people to use 
the app: users are encouraged to jump 

in and do a quick test in the selected 
language (even without signing up). 


the user interface as ‘invisible’ as you 
can. Interestingly, during a redesign 
phase for the Google Maps app for iOS, 
Google removed all of the unnecessary 
panels and buttons and said that the map 
is now the interface. 


Design clear user flow 
Whatever you’re designing for a mobile 
device will be used ‘on the go’. Users 
often have to quickly accomplish one 
core function in a mobile app - make a 
payment, check for new messages, etc. 
This critical flow should be crystal clear 
for the user. Reduce the effort users 
have to put in to get what they want by 


The trick with onboarding is to show just 


what users need to know to get started 
— nothing more, nothing less 


Don’t ask users to rate your 
app soon after downloading it 
Avoid interrupting users by asking them 
to rate your app if they’ve only recently 
downloaded it. Instead, wait until they 
prove to be repeat users and they’ll be 
more likely to rate your app and provide 
more informed feedback. 


De-clutter your user interface 
Cluttering your interface overloads your 
user with too much information: every 
added button, image and line of text 
makes the screen more complicated. 
Clutter is bad on a desktop app, but ona 
mobile one it’s a hundred times worse. 
It’s important to get rid of anything on 
a mobile design that isn’t absolutely 
necessary, because reducing the clutter 
will improve comprehension. 


Prioritise content over chrome 
Chrome denotes the UI elements that are 
instrumental in using an app. Whereas 
on desktop there is enough screen space 
for both content and chrome to coexist, 
on mobile designers must downplay 

the chrome to make space for essential 
content. As a designer you need to 
accommodate a high content-to-chrome 
ratio on the mobile screen: try to keep 
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using easily recognisable functions that 
are inherent in other well-known apps 
in your category and by guiding users 
seamlessly through task completion. 


Follow the rule ‘one screen, 
one task’ 

Design each screen for one thing and 
one thing only, with no more than one 
call-to-action. This makes it easier to 
learn, easier to use and easier to add to 
or build on when necessary. Take Uber, 
for instance. Uber knows that the goal 

of the person who uses the app is to take 
a cab. The app does not overwhelm the 
user with too much of information: it 
automatically detects user location based 
on geodata and the only thing users have 
to do is to select a pick-up location. 


Make navigation self-evident 
Helping users navigate should be a high 
priority for every app. Navigation doesn’t 
just provide wayfinding for users, but 
also communicates to users what features 
the experience provides. Good navigation 
should feel like an invisible hand that 


Action points Every screen that you design for the 
app should support a sing ion of real value to 
the person using it 


Take a test to jump ahead! 
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% Landmark 
It takes about 5 minutes, and adapts to your 
level by getting harder (or easier) based on your 
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Attention grabbing 4 user's 


Alarm Stopwatch Timer 


Target sizes Smaller touch targets are harder for users to hit 
than larger ones. Aim for controls that are 7-10mm in size 


attention is a precious resource and 


should be allocated accordingly 


guides the user along their journey. 
Experiments show that exposing menu 
options in a more visible way increases 
engagement and user satisfaction. 


Design for interruption 
Because people use phones in a variety 
of contexts and situations, they are 
more likely to be interrupted when using 
devices. As a result, attention on mobile 
is often fragmented and sessions on 
mobile devices are short. The average 
mobile session duration is a little more 
than a minute. Short mobile sessions 
mean that your design should be prepared 
for such interruptions - save context and 
make it easy for users to re-engage with 
an app later (resume an interrupted task). 
But designing for interruptions doesn’t 
only mean saving state. It also means 
simplifying tasks and interactions. A 
simple task is easier to finish quickly. It’s 
also easier to resume than one with many 


steps and alternatives. Thus, break down 
larger tasks into smaller ones so as not to 
overload the user. 


Avoid dead ends 


A dead-end page is a point in user journey 
that leads nowhere. The most common 
example of such a page is an empty state 
containing an error message. You should 
avoid creating dead-end pages in your 
apps, because dead-ends create confusion 
and lead to additional and unnecessary 
actions. Designing a UX is designing for 
flow, and flow is, in most cases about 
moving forward to accomplish a goal. 
Thus, nothing in your app should be a 
showstopper for your user. 


Don't simply direct users to 
the browser 

Users can get frustrated when an app 
takes them to the mobile web for more 
content or to complete a task. If your 


Mobile design 


Tap away The 
tab bar displays 
all of the major 
navigation options 
and with one 
simple tap a user 
can go from one 
page to another 


Case study: Why hidden 
navigation is bad for 
your design 

It's tempting to rely on hidden menus 
(such as hamburger icons) in order to 
simplify a mobile interface. But hiding 
critical parts of an application behind 
these kinds of menus could also negatively 
impact usage. 

In his article Obvious Always Wins (goo. 
gi/l38cRm), Luke Wroblewski warns of the 
dangers of hidden navigation. He provides 
an example of the Polar app. In an effort 
to simplify the visual design of the app, 


they moved from a segmented control 


menu to a toggle menu. While the toggle 
menu looked cleaner, engagement fell 
drastically. This navigation method was 
less discoverable: people were no longer 
moving between the major sections of the 
app as they were all hidden behind the 
toggle menu. 


Forgotten features What's out of sight is out of 
mind. Any navigation options hidden behind the 
hamburger will be forgotten or used a lot less 

It's challenging to find the room to 
expose important actions on constrained 
mobile screen sizes, but it’s necessary for 
designers to do so — when critical parts 
of an application are made more visible, 
usage of them can increase. 


Visible menu Exposing menu options in a more 
visible way increases engagement 
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Design with gestures 


Building gestures into the heart of the 
design saves screen space for valuable 
content. Touch interfaces provide many 
opportunities to use natural gestures 

like tap, pinch and swipe to get things 
done. But unlike graphical UI controls 
such as buttons, these interactions are 
often hidden and users don’t know what's 
possible until they try. For example, how 
do iPhone users know that by swiping an 
item, they'll be able to see a list of actions 
available to carry out on that item? 


iOS gestures A swipe-to-left gesture in Apple Mail 


Follow these three tips to fill your apps 
with gestures that enhance the UX: 


© Itis vital to know your market and 
the other apps your target audience 
may be using, so you can employ the 
same types of gestures in your app. 
For example, if you design a mail app 
you can use a swiping-over-an-email 
gesture because there's a strong 
possibility that it'll be familiar for many. 


- When it comes to teaching users to 
use your Uls, we would recommend 
to do so mainly by just-in-time 
education. The most popular form of 
such education is contextual hints. 
Focus each tip on a single, unfamiliar 
interaction and remember that these 
hints should appear on the first launch 
for new users, one at a time, as the user 
reaches the relevant section of the app. 
This makes it a lot easier for users to 
understand and learn instructions. 


~ Gestures would be nothing without 
animation. Paired with gestures, 
animations essentially trick the brain 
into thinking that it’s interacting with 
something tangible. This reactivity 
boosts positive user experience. 
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app lacks a specific feature or content, 
try to use an in-app browser, but do not 
invoke the smartphone browser or you 
will cause users to lose their track and 
not return to the app. 


Mobile apps should play nice with the 
user’s thumb. Important content needs to 
be aimed towards the thumb, to where it 
is natural for the thumb to be. 


The thumb zone - the most comfortable 
area for touch with one-handed use - is 
an important factor in the design and 
development of mobile interfaces. The 
image to the right is from article ‘How 
we hold our Gadgets’ (goo.gl/VooMEO). 

It shows the areas of a screen that are 
easiest to tap when holding a normal size 
mobile with one hand. 

Place top-level destinations and 
frequently-used controls in the easy-to- 
reach green zone and place controls that 
you don’t want users to accidentally tap 
(such as delete or erase) in the hard-to 
-reach red zone. 


Make your tap targets big enough so 

that they’re easy for users to tap. Create 
controls that are seven to ten millimetres 
in size so they can be accurately tapped 
with a finger. Such button size allows 

the user’s finger to fit snugly inside the 
target. The edges of the target should be 
visible when the user taps it. 


In each platform’s measurements we 
would suggest the following: 

For iOS: 48px at 1x 

For Android: 48dp is 48px at 1:1 ratio 


Ensure that there is good amount of 
space between tap targets and minimum 
spacing between elements is 2mm. 


If you are designing an app for Android 
and iOS, it’s important to understand the 
difference between the two platforms 
early on and the quick ways that you can 
make the experience feel native to each. 


As you build your app for Android/iOS, 
don’t carry over themed UI elements 
from other platforms and don’t mimic 
their specific behaviours: 
Input fields, check boxes, switches and 
other functional components should 
give a native feel, so that people know 
how to use them and trust your app 
with their sensitive data. 
Each platform typically provide sets of 
icons for common functionality, such 
as sharing, creating a new document 
or deleting. As you are migrating your 
app to another platform, you should 
remember to swap out platform- 
specific icons with their counterparts. 
The typeface also needs to comply 
with the standards of each platform: 
Android’s typeface is Roboto (goo. 
gl/NU620k), while iOS uses the San 
Francisco (goo.gl/T8bDx0) font family. 


& 


Colour codes 


Heading 
suD-Headiine 


o 


Text sizes 


Heading 
Sub-Headline 


Design decisions that make perfect 


sense on one platform will look and 


feel misplaced on a different platform 


Consider different patterns for 
iOS and Android 

It’s important to understand the idioms 
and behaviours of each platform before 
you start design and development. Design 
decisions that make perfect sense on one 
platform will look and feel misplaced on 
a different platform. 

Perhaps the biggest point of difference 
between iOS and Android platforms is 
navigation. The difference is clearly 
visible in the context of tabs. 

On iOS, it’s common to use a bottom 
tab bar to switch between top-level 
destinations in the app. 

The primary navigation pattern on 
Android is a drawer menu. It’s also 
common on Android to use a tab bar 
at the top of the screen, however this 
element actually serves a different 
purpose - it has a name, Action Bar (goo. 
gl/okQJhg), and should be used to take 
actions, instead of navigating. 


Dig deeper 

Find more about design specifics 
for each platform in the article 
‘Design from iOS to Android 


(and back again)’ (goo.gl/6qarLM) and 
see how the specifics differ between an 
Android and iPhone UI (goo.gl/cr4AQ3). 


Focus on readability and 
scannability 

When compared with desktops, mobile 
devices have relatively small screens, 
which means that one of the challenges 
of designing for them is to fit a lot of 
information on a small UI. You might 
have a temptation to squish everything 
down in attempt to provide as much 
information as possible, but you should 
resist that temptation. 


Make sure text is legible 
The following techniques should improve 
text legibility: 


@ Text should be at least 11 points so it’s 
legible at a typical viewing distance 
without zooming. 

@ Good spacing aids readability. By 
adding a little space to text - both 
between lines and in the margins — you 
are helping users better interact with 
the words. 


Android actions 


Android 
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@ Don’t mix several different fonts in 
your design, because it can make your 
app seem fragmented. Consider using 
one font and just a few styles and sizes. 

@ Don’t use low-contrast text. When the 
contrast is too low, users experience 
eye strain as they try to decipher the 
words. This is especially true on mobile 
screens, where users are more likely 
to be outdoors or in bright places that 
cause screen glare. 


The last moment requires further 
clarification, because low-contrast text 
is avery popular choice among many 
designers. In practice, the right amount 
of contrast is a tricky thing. WC3’s Web 
Content Accessibility Guidelines (goo.gl/ 
0zX48q) are a good place to start. The W3C 
recommends the following contrast ratios 
for body text and image text: 
@ Small text should have a contrast ratio 
of at least 4.5:1 against its background. 
@ Large text (at 14 pt bold/18 pt regular 
and up) should have a contrast ratio of 
at least 3:1 against its background. 


Use WebAIM Color Contrast Checker 
(goo.gl/XWIpHa), a browser-based tool, to 
check your colour contrast. 


Use negative space to draw 
attention to important content 
White space is the areas of a design where 
there is no element placed by a designer. 
Although many designers may consider 

it a waste of valuable screen estate, 
generous white space is an essential 


[iaeeiietied 
o 
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Keep contrast |nsufficient contrast between the text colour 
and the background degrades the user experience 
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element in mobile design. It creates the 
spaces around elements in the design to 
help them stand out or separate from the 
other elements. 


High-resolution assets 

Images should be appropriately sized 

for display purposes. You should display 
photos and graphics in their original 
aspect ratio, and don’t scale them greater 
than 100 per cent. 


Easily generate the optimal 
responsive image dimensions 
Mobile apps often struggle with selecting 
image resolutions that best match the 
various user devices. It’s quite clear that 
one image for all screen resolutions 

and different devices is not enough. 
However, an image per pixel is too 

much - cropping images one at a time 
can be overwhelming especially if you 
have a ton of images to work through. 
Luckily though, there are solutions for 
this problem and one of them is online 
tool Responsive Breakpoints (goo.gl/ 
BfynzK) which enables you to interactively 
generate all required images. 


Create a positive experience 
Many people seem to think of user 
experience as a controllable outcome of a 
design process. But in fact your product 
doesn’t define a user’s experience — a 
user’s own emotions do. User experience 
is a feeling. While you cannot directly 
design a person’s experience of a product, 
you can take steps to ensure that their 
experience is a positive one. 


Make the app appear fast 

Try as much as possible to make the app 
fast and responsive. Do things in the 
background to make it look like actions 
are happening quickly. Actions which 
are packed into background operations 
have two benefits - they are invisible to 
the user and they happen before the user 
actually asks for them to happen. A good 
example of this is uploading pictures on 
Instagram. As soon as the user chooses 

a picture to share, the app will start 
uploading the file. The app invites the 
user to add tags while the picture uploads 
in the background. By the time users 


7:35 PM 


TORONTO 


Efficient spacing |everaging space helps define different 
sections of this weather app in a non-obtrusive manner 


have added all required tags and are ready 
to press a share button, the upload will be 
completed and it’ll be possible to share 
the picture instantly. 


Minimise the need for typing 
Typing on a mobile is a slow and painful 
process. If possible, always allow users to 
tap, rather than type: 

@ Keep forms as short and simple as 
possible and remove any unnecessary 
fields. Learn more about a topic in 
‘Design Responsive forms’ from net 
magazine December 2016 (issue 287). 

@ Use smart features such as 
autocomplete and autodetection of 
location so that users only have to enter 
the bare minimum of information. 


Include functional animation 
It is the little things that can make your 
user experience truly delightful and 
memorable. By injecting subtle details 

- like animated microinteractions or 
in-app sounds — into design, you can 
make users feel like they are interacting 
with something that has a personality 
and not just a stone-cold interface. 


Order confirmation 
for Yuna 


Fri, Mar 7, 8:00 PM | Reservation for 2 
MOODIF 


VIEW MAP 


@ Order confirmation for Yuna 
to me 


Clear picture 


Resources 


Guidelines for design 

When it comes down to designing for 
mobile user experiences, you can’t go 
wrong with sticking to best practices for 
your particular industry. Both the Material 
Design (goo.g//BrOMgn) and iOS Human 
Interface Guidelines (goo.g//SO6yfz) offer 


Order confirmation everything you need to design beautiful 


for Yuna and engaging apps. 


UI Inspirations 
Fri, Mar 7, 8:00 PM | Reservation for 2 Find design inspiration from real live 
projects on Useronboard (goo.g//9IYUUN), 


Little Big Details (goo.g//AdNyvQ) and 


MODIFY 
Mobile Patterns (goo.gi/IjsKK5). 
VIEW MAP = 
Prototyping 
Axure (goo.g//wvulYj) and Balsamiq 
Order confirmation for Yuna 3 . 
@ to me (t) (goo.gl/3DhvdyY) are great wireframing 


tools. Since wireframes require little 
investment in time and effort, you'll 
@ revise your designs more often and also 
refine them much sooner. And with tools 
such as Adobe XD Design (goo.gl/8Xyknp) 


and InvisionApp (goo.g//hKtrlv) it's now 
incredibly easy to create an interactive 


Apps that allow users to switch mebie prototype 


channels while completing tasks 


have a competitive advantage 


Since users often don’t complete an 
activity through a single device, apps 

that allow users to switch channels while 
completing tasks have a competitive 
advantage. A seamless user experience is 
one of the most important requirements 
for a usable cross-device experience. You 
should design for the entire journey, not a 
single interaction experience. 


Even the most thought-out UX will 
ultimately contain some unseen flaw 

in the real world. That’s why it’s so 
important to test your app with real users 
on a variety of devices. Ask real users to 
complete regular tasks, in order to see 
how well the design really performs. 


Improving the user experience isn’t : 
P 8 u P Quick stages Adobe XD allows you to go from 


a one-time task, it’s an ongoing wireframe to interactive prototype, from desktop to 
experience. Treat your app as a unleb I es INieeolats 

continuously evolving entity, use data Design hand-off 

from analytics and user feedback to Sympli (goo.g//IW//785) and Zeplin (goo. 
constantly refine your design and gi/LaL7CK) are great timesavers and 
improve the experience. enable you to generate style guides and 


resources automatically. 


People expect a lot from app interfaces 
today and the standards are just getting 
higher. You need to work hard to meet 
these expectations and make your app 
truly delightful. Just remember that 
design isn’t just for designers — it’s for 
users. Thus, to build a product that people Working together Sympli helps designers and 
enjoy, your whole product team needs to developers collaborate 

focus on the user. 


net may 2017 75 


ey / 


, 


RAR 


, 
rarhaoodee 
y Of 


(G4 f, 
Very 
wadgerge. 
6 
Ud 
tashaoe 
7 
é 


UZ 
é 
é 


tarha 


Lam WS 
y 


anys 
\ 


Wr 
ry 4 
Y4 4; 
trahasdygs 
ff; 
ff 
wrrgrrhas 
Vip 


rahardg as 


4 
76 net may 2017 


[ARN 


as 
= 

an 
as 
uN 
ar 


0 cele ele tee tate ete ted tale peshersg- 


ar 
Ame 
~zR 


a] 
‘ 
Kaan 
\ 
\ 
LY 


QRS 


\ 
SSNS 
\ 
A 
AS AQR SS 
\ 
\ 


\ 
\ 


-eabhaooe 


4 


, 
“4 i aaa 
, és 
4 4 
vag vrhbaowe 
mis 
‘ sg 77. 


. é 

Yfy, 
et ahah 
oO 
sieerges: 

AO” 

v) U 
ragerdere 
7 
4 
“A/7/9 


Web APIs 


10 WEB APIS 
YOU'VE NEVER 
HEARD 
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PHILIP ACKERMANN 
(@cleancoderocker) is 

a software engineer 
working at the 
Fraunhofer Institute. He 
is the author of three 
books and articles on 
Java and JavaScript 


here is a huge number of Web APIs 

available and sometimes as a web 

developer it can be hard to keep 

track of new APIs. So we’ve helpfully 

collated a list of Web APIs that are 
not finalised yet and in very early stages, 
but are likely to become important in the 
following months or years. These APIs 
include handling payments, connecting 
to sensors and more — make sure you 


keep tabs on them. 
01 w3.0rg/TR/payment-request 

When you look at payment forms 
and workflows on websites and web 
applications they often differ from each 
other, although in principle the workflow 
should always be the same: confirm 


philipackermann.de 
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Payment Request API 
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Philip Ackermann takes a look at the most 
interesting Web APIs currently in development that 
may be supported by browsers in the coming years 


the shopping cart, add the shipping 

and billing address, select the payment 
method, confirm everything, accept the 
terms and conditions and send the final 
request form. From a usability point of 
view this difference can actually have a 
negative effect. From a developer’s point 
of view, implementing a payment flow 
every time from scratch can also bea 
very time-consuming process: different 
forms need to be implemented, different 
payment methods like PayPal or credit 
card integrated and everything has to be 
secure as well. The Payment Request API 
currently developed by the W3C wants to 
facilitate and standardise the process of 
creating payment workflows and provides 
several interfaces. It’s definitely an API 
that’s worth a look in! 
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Web Share API and 

Web Share Target API 

github.com/WICG/web-share 
and github.com/WICG/web-share-target 
The goal of the Web Share API is to have 
a standardised way of sharing resources 
(including text, images, URLs and 
so on) from a mobile application to a 
destination specified by the user, which 
could be another mobile application, a 
website or a system service provided by 
the mobile operating system. The Web 
Share API extends both the interfaces 
Navigator and WorkerNavigator with a 
method share(), which takes the shared 
resource as parameter. While the Web 
Share API defines how to share resources, 
the Web Share Target API defines 
how to receive such shared resources. 
Applications (either native or web) and 
other services can use this API to register 
themselves for the share event to receive 
shared resources. 


WebUSB API 
wicg.github.io/webusb 
USB (Universal Serial Bus) is 


one of the standard ways of connecting 
external devices to a computer. While 
standard devices like mouse and 
keyboard are automatically recognised, 
some devices require you to install 
native drivers (in other words, native 
code) to be able to work with them. 
However, because of this native code 
these devices cannot then be used by 
browser in a standard way. This is where 
the WebUSB API comes into play: the idea 
is that USB devices expose their services 
through this API so web applications 
can access those services. To achieve 
this the interface Navigator is extended 
with the property USB, which then gives 
you access to an object of type USB, the 
main entry point for this API. Using 

the method getDevices() you can, for 
example, retrieve a list of all devices that 
are currently available and subsequently 
directly start working with them. 


Geofencing API 
w3.0rg/TR/geofencing 
Today you can already determine 


the current geographic position of a 
device through the Geolocation API. 
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Share together The \' 


The Web Share 
Target API defines 
how to receive 
Shared resources 


However with the new Geofencing API 
it will be possible to set up geographic 
boundaries around specific locations 
and get notified when a device enters 
or leaves those locations. The API will 
be based on Service Workers, so even 
if the Geofencing API is used in a web 
application that has been closed it will 
still receive notifications. 


Presentation API 
0 A w3.org/TR/presentation-api 

There are a lot of libraries for 
creating presentations based on HTML5, 
CSS and JavaScript. However, there is no 
standard way to handle the interactions 
between the controlling part ofa 
presentation and the actual presentation. 
This is were the Presentation API comes 
into play. The idea behind it is to be able 
to have one webpage that contains the 
presentation and one webpage that runs 
the code for controlling the presentation. 
Depending on the capabilities of the 
presenting device and the connection 
mechanism (DVI, HDMI, Chromecast, 
AirPlay and so on), either both webpages run 
in the same user agent (on the controlling 
device) or one runs in a user agent on the 
controlling device while the other one runs 
in a user agent on the presenting device. 


Web page Compose E-Mail 
From me@example.com 
——— 
To you@example.com 
Subject: | 
Share via 
oe aad 
E-Mail Twitter 
Copy to 
Face k 
clipboard aceboo 


Shape Detection API 
| rt wicg.github.io/shape- 
detection-api 
Detecting shapes in images is something 
very useful (think of Facebook’s face 
detection features) and there are some 
libraries available for this, like 
tracking.js (trackingjs.com). The Shape 
Detection API, which is currently in 
progress, defines interfaces to detect 
different shapes in still images or in live 
image feeds. At the current stage the API 
has three sub-APIs: one for detecting 
faces, one for detecting barcodes and one 
for detecting text. The three interfaces 
FaceDetector, BarcodeDetector and 
TextDetector are all used in a similar 
way: they all provide a method detect(), 
which takes an image source as input and 
returns a Promise object with a sequence 
of detected shapes. 


Async Cookies API 

0 / github.com/WICG/async- 
cookies-api 

The current interface to work with 

cookies (document.cookie) is not very 

comfortable: there are no standard 

methods for adding, reading or deleting 

cookies, so all of this has to be done 

manually via string parsing and string 

manipulation. Of course there are 

helper libraries to facilitate all of 

those operations, but with the Async 

Cookies API it will be much easier 

and more performant as well. The idea 

is to not only store the cookies in 

document.cookie, but also provide a 

new object named cookieStore, which will 


Mode 1 Mode 2 
More interesting APIs 
Controlling device ht 4 Controlling page Controlling device “| Controlling page in development 
+ + 
| Presentation Control Protocol There are other APIs worth knowing in 
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Presenting device 


addition to what we've discussed here... 


Reporting API 
Defines an API for generic reporting 
functionalities (w3.org/TR/reporting). 


Web Budget API 

Defines an abstract API for retrieving 
the budget available for resource- 
consuming background operations (wicg. 
github.io/budget-api). 


Permissions API 
Defines an API for querying and 


Google maps aps with less pa are Pun changing the status of browser 
Geofences permissions (w3.org/TR/permissions). 
~ You can attach a geofence (which can be @ polygon or f 
o = ue @ bounds) to a marker with Ambient Light API 
. “ | en - Seba Defines an API for monitoring the level 
é’ roa) aw Gacieatna of ambient light of a device (w3.org/TR/ 
: A r 1 J 
9 worn FANcoer mai ambient-light) 
=F fillopectty: @.4 Ig | . 
map adder ter 
¥} ut 4 
“ Senedias ores Remote Playback API 
» Mayor de fences: (polygon A . 
CENTRO A ernehdes Tenetioninarter. fonts Defines an API for controlling remote 
HISTORICO , ‘ ence ¥ 
soogle a oe playback of media on remote playback 


Maps boundaries 


be accessible both in webpages and in 


service workers. The object has methods 
like write() and set() for adding cookies, 


delete() for deleting them and read() 
for reading cookies and they all work 


asynchronously, so even if some cookie 


processing takes longer, this will not 
impact on the overall performance. 


You must define an outside callback, which will use 
this marker and its fence. 


event. When supporting both mouse 
and touch events this can lead to 
problems and difficulties: it is hard to 


find out if some event (eg mousedown) 
was triggered from the mouse (because 


a mouse is used) or just because of 
compatibility reasons (but the actual 


device is a touch device). The new Input 


Device Capabilities API wants to solve 
those problems and introduces a new 


devices like TVs, projectors or speakers 
(w3.0rg/TR/remote-playback). 


Intersection Observer API 

Defines an API for observing changes 
in the intersection of elements (github. 
com/WICG/IntersectionObserven). 


Worklets API 

Defines an API for executing JavaScript 
code independent of the main JavaScript 
context (w3.org/TR/worklets- 1). 


Proximity Sensor API 
Defines an API that measures a device 


interface (InputDeviceCapabilities), which 
provides information about the device via 
a new property sourceCapabilities of the 
UlEvent interface. 


Nested proximity (w3.org/TR/proximity). 
InputDeviceCapabilities 

Input events like the click event are only 
abstract representations of the device 
input and do not contain information Tava 
about the actual device that has been u github.com/flyweb/spec 

used to generate the event. Developers \) W With the rise of the Internet 

need to make assumptions about which of Things, it becomes more and more 

actual input device triggered such an important how devices and electronics > 
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Resources 


Bookmark these really helpful 
websites to keep up to date with new 
features and proposals. 


Web Incubator Community Group 


The goal of the Web Incubator 
Community Group is to propose and 
discuss new features for the web and 
to migrate them when stable to the 
W3C Working Group. 


search the Lergusn Ar ovectery en SED 
the Web ~ 


Programmable Web 


A website claiming to be the “largest 
API directory on the web” with APIs 
for Twitter, Facebook and more. 


W3C’s JavaScript APIs Current 
Status Page 


Get an overview of the status of the 
different Web APIs maintained by the 
W3C with this website. 


The HTML 5 JavaScript API Index 


This provides documentation of 
the standard HTML5 Web APIs, 
automatically generated from the 
HTMLS5 specification. 


Google Chrome JavaScript APIs 
This website gives you an overview 


about the Web APIs that are supported 
by the Google Chrome browser. 
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connect and interact with each other. 
The idea of the FlyWeb API, which is 
being developed by the Mozilla team, is 
to be able to serve web applications on 
electronics and to then connect to these 
applications from other electronics (for 
example, with smartphones) within 

the same network. Say that you want to 
connect a smartphone to a game console, 
the latter would provide a small FlyWeb 
server and this would then be visible to 
the smartphone. 


Push API 
1 [) ac github.io/push-api 

In traditional web applications 
there was no way for a server to actively 
send messages to a client, for example, 
to update a news ticker or to update 
some real-time data stream. Instead 
developers used techniques like Long 
Polling, XHR Polling or Hidden Frames 
to simulate real-time connections. 
Fortunately thanks to Web Sockets 
and Server-Sent Events (SSEs) those 
techniques are not necessary anymore. 
With Web Sockets you can implement a 
bidirectional communication between 
the client and the server and with SSEs 
an unidirectional communication going 
from the server to the client, which is 
perfect for sending updates actively 
from the server to the client. However 
both technologies require a browser 
window/tab to be open to receive those 
updates. With the new Push API this is 
not necessary: it is directly connected 
to the Service Worker API and allows 
service workers to receive messages from 
a server. This means that even if a web 
application has been closed the service 


Push APia 


wt ; A 


Messages 


worker can still receive the messages, for 
example if you want to send notifications 
via the Notifications API (notifications. 
spec.whatwg.org) to inform the user about 
any updates. 


Generic Sensor API 
__w3.0rg/TR/generic-sensor 

~ There are already a lot of Web APIs 
that define interfaces for different kinds 
of sensors, eg the Device Orientation API 
or the Geolocation API. Unfortunately 
those APIs do not have a common 
interface and are all used differently, 

so for example by providing callback 
handlers in one case or by registering 
event handlers in another. The goal of the 
Generic Sensor API is to define a set of 
common generic interfaces for accessing 
any kind of sensor. Concrete sensor APIs 
that are based on the Generic Sensor API 
(such as the Ambient Light API) extend 
generic interfaces and add functionality 
as required. 


. Accessibility API 
f) github.com/WICG/a11yapi 
q4 Accessibility is an important 
point when developing web applications. 
There are already standards like ARIA 
(Accessible Rich Internet Applications, 
w3.o0rg/TR/wai-aria-1.1), which provides 
an ontology of roles, states and properties 
to define accessible user interfaces on the 
web. It can also enrich HTML elements 
(on a markup level) with information 
that can be used by assistive technologies 
like screen readers. However, the 
Accessibility API creates a standard Web 
API for JavaScript, based on ideas from 
ARIA and other existing accessibility 


The Accessibility 


API creates a 
standard Web API 
for JavaScript 


APIs like Web Accessibility and Actions 
by Microsoft (github.com/cyns/wapa), the 
Web Accessibility API by Mozilla or other 
native platform APIs (including the Java 
Accessibility API). Using the new property 
allement on DOM elements, developers 
can access semantic information about 
the element like the role, the state, 
relations to other elements and many 
more using JavaScript. 


Font Loading API 
1 3 drafts.csswg.org/css-font-loading 
When you are using custom 
fonts on a webpage, downloading the 
font files can take time, depending 
on the bandwidth and the size of the 
font files. This can then lead to display 
problems like flickering content when 
the webpage starts rendering without 
the font face being loaded first. The new 
Font Loading API addresses this problem 
and it can define a standardised API 
for downloading font faces by utilising 
JavaScript. Developers can choose when 
to load a font face and what to do when it 
has been downloaded. 


Web Bluetooth API 
1 [| sesso nie 
bluetooth 
The Bluetooth protocol is a standard that 
is often used in the field of IoT (Internet 
of Things), for example to connect a 
smartphone or tablet to other devices 
like health trackers to read certain sensor 
values. For mobile web applications it is 
already possible to connect via Bluetooth 
by using PhoneGap and its plugins, but 
if you want to use Bluetooth inside of a 
web application on a desktop computer or 
laptop then you will still need to install 
an extra browser plugin. The goal of the 
Web Bluetooth API that is being worked 
on by the W3C Web Bluetooth Community 
Group is to provide a standardised API for 


Visual vs, Layout Viewport Demo 
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CSS Font Loading @ 


This C55 module defines a scripting irterface to fom faces in CSS, 
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Easy loading With the Font Loading API you can load font faces dynamically with JavaScript 


accessing Bluetooth devices through the 
browser, without any plugins. 


Visual Viewport API 
1 A github.com/WICG/ViewportAPI 

As you know, web applications 
contain two viewports: the layout 
viewport, which represents the space 
where a page lays out its elements into, 
and the visual layout, which represents 
what is visible on the screen. However, 
working with those two layouts can be 
a confusing task: while some properties 
like innerWidth and innerHeight are 
relative to the visual viewport, other 
properties such as those for accessing 
event coordinates are relative to the 
layout viewport. On top of that, the 
browser behaviour can also differ when 
you pinch-zoom into an application 
(an online demo that visualises those 
problems and the relationship between 


these two different layouts in general 
can be found at bokand.github.io/viewport/ 
index.html). To overcome these problems 
and disparities, the goal of the Visual 
Viewport API is to add new properties 
that are all related to the visual viewport, 
as well as to introduce a property 
visualViewport on the window object. 


Conclusion 

So we’ve put together an interesting 
collection of Web APIs that are in 
development. They are not guaranteed to 
ever be officially published, and the time 
frames for this are not clear, but they 
are worth keeping an eye on. To stay up 
to date with the latest developments you 
can have a look at the GitHub page of the 
Web Incubator Community Group, which 
is available at w3.org/community/wicg or 
the news page of the W3C, which can be 
found at w3.org/blog/news. Stay tuned! 
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are supported. 


BROWSER SUPPORT 


We feel it’s important to inform 

our readers which browsers the 
technologies covered in our tutorials 
work with. Our browser support 

info is inspired by @andismith's 
excellent Can | Use web widget 
(andismith.github.io/caniuse-widget). 
It explains from which version of } 
each browser the features discussed 


EXCLUSIVE VIDEOS 


Getting excited by the 2017 leg of 
Generate, New York? We've got all 
the incredible highlights of last 
year's conference for you to check 
out free on YouTube. Just head 

to www.youtube.com/creativebloq 
where you'll find in-depth 
sessions from the likes of Meg 
Lewis, Marcy Sutton and Tim 
Holman. It's unmissable stuff! 
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BOOTSTRAP 


EXPLORE NEW LAYOUTS 
WITH BOOTSTRAP 4 


Ray Villalobos walks through the new features in Bootstrap 4, 
including its exciting new Flexbox capabilities 


Layout on the web has been a nightmare so 

far, because the tools we’ve had for even the 
simplest layout tasks have been wholly inadequate. 
The browsers laughed in the face of your attempts 
to lay something out consistently as they thwarted 
your feeble attempts at vertically centering things 
... how dare you? 

We have worked around it, stressed over it, lost 
hours of sleep and welcomed anything that made 
it simpler. Well, all that’s about to change for the 
better with this new version of Bootstrap. If you live 
on the bleeding edge of frontend development, you 


won’t mind using the very latest tools like Flexbox, 
variables and even CSS grids, but there are always 
problems with compatibility and browser support. 
For real-world, day-to-day work you need something 
that is more sensible. 

Bootstrap is the web’s most popular framework 
because it gives you a decent system within which 
to get things done. This battle-tested tool has been 
popular for years. However, version 3 is starting 
to show its age, and there are some components 
that could have been done better (navigation, I’m 
looking at you). 


THE NEW VERSION 

The new Bootstrap 4 is different in a number of 
significant ways, but all the changes feel amazingly 
practical. However, some of this power comes at a 
price. The bad news is that it doesn’t migrate well 
... at all. 1can’t emphasise this enough. Migration 
is going to be a major issue. 

The grid in the new version, for example, is 
similar to the old grid, but different enough that 
you’ll have to do some work to fix your old layouts 
(more on that later). Your forms and navigation 
are going to break (badly) and even things like 
the classes for responsive images and carousels 
will need some love. 


GOODBYE IE9 


One of the best decisions the developers made 
in this version of Bootstrap is to let go of Internet 


Explorer 9 support, which means if you need to 
support older browsers, you won’t be able to use 

it. However, this is the decision that made using 
Flexbox possible. The framework CSS will take care 
of the issues in IE10 Flexbox code, which cause 
problems when writing CSS for those browsers. 


REBOOT 

Another big change is the new reset template, 
which is called Reboot. We use reset templates like 
normalize.css and others to make browsers behave 
consistently, and to apply things like a reasonable 
box-model or the handy clearfix trick. 

Bootstrap 4 does this too, but it goes further. 
Reboot is highly opinionated, but in a good way; 
it makes sensible decisions about how browsers 
should work, and incorporates some of the latest 
thinking in best practices for development. Let’s 
look at some examples. 


REMS VS EMS 
In the old version of Bootstrap, the fonts were 
smaller and there was more space above headlines. 
In the new version, the fonts and breakpoints are 
bigger, and your content will shift a bit because of 
new breakpoints in the grid. 

The default units for sizing elements in Bootstrap 
are now rems and ems. Rems are root ems, which 


FOCUS ON 


WHAT'S MISSING 


+ There are a lot of exciting changes in this new version of 


Bootstrap, but there are also a few things you might miss 
from Bootstrap 3. Here are some of them: 


Icons 

A limited set of glyphs — known as Glyphicon Halflings — were 
available from the Glyphicon library. These are no longer included 
with this version of Bootstrap. So if you were already using 
them, you'll need to either use Bootstrap 3, get a license from 
the Glyphicon website (0-$50) or use a different icon set. Some 
of the obvious alternative options are Octicons from GitHub, 
Font Awesome or the Noun Project. 

The only problem is that the code for the icons is no longer 
embedded into Bootstrap, so you'll have to add that separately 
or manually. Several icon sets like Font Awesome include code 
that is easily compatible with Bootstrap. 


Affix 

The affix plugin is also gone. Affix allowed you to fix the position 

of certain elements on the page as you scrolled, and was commonly 
used with the component in order to highlight certain 
navigational elements during a scroll. 

The default way around this is to use a class called 
which will affix the component to the top of the screen 
using a CSS property. The problem with using this is that the 
browser support isn’t too great. 


41 New Icons in 4.7 


Web Appl 


Font Awesome One possible replacement for Bootstrap 3's Glyphicon Halflings 


net may 2017 85 


> means they are proportional to the root font size. 
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In most browsers that is 16px. The old version of 
Bootstrap reset the base font size to 14px, but this 
new version puts it back to 16px on the <html> tag 
and 1rem on the <body>. 

This will make it easier to set up component 
sizing, which will in turn make it easier to change 
the sizing of the entire page or individual portions 
and components. Bootstrap 3 is a bit messy when it 
comes to customisation, so this is a welcome change. 


NATIVE FONTS 

Some things about Bootstrap 4 seemed strange at 
first, and native fonts was one of them. Bootstrap 
3’s default fonts were Helvetica Neue, Helvetica and 
Arial. This version drops that in favour of a native 
font stack. 

There are more device types around than ever 
before, and almost every device uses its own custom 
font. In a responsive world, it makes no sense to try 
to shove Helvetica down everyone’s throat. Even OSX 
has its own beautiful custom font (San Francisco). 
So why not use that? 

Here’s the new setup for the fonts. 


$font-family-sans-serif: 

// Safari for OS X and iOS (San Francisco) 
-apple-system, 

// Chrome >= 56 for OS X (San Francisco), Windows, Linux 
and Android 

system-ui, 

// Chrome < 56 for OS X (San Francisco) 
BlinkMacSystemFont, 

// Windows 

"Segoe Ul", 

// Android 

"Roboto", 

// Basic web fallback 

"Helvetica Neue", Arial, sans-serif !default; 


MARGIN PROPERTIES 

Another thing that will feel weird at first is that all 
of the margin-top properties have been cleared in this 
new version. When you migrate your existing website 
it will need some margin love, especially on your 
site’s headlines. 

The reason for this change is that browsers make 
margins collapse, which makes it difficult to know 
exactly where any spacing above and below is coming 
from. This change should help make things more 
consistent: now, spacing is always at the bottom 
and never at the top. 

Thankfully, this new version of Bootstrap includes 
some new classes that will let you put the space 


back. They also feel strange at first, but once you 
get used to them, they make a lot of sense. 


INHERIT 

Another change in Reboot is that the inherit property 
is used as much as possible. This makes things easier 
to update, because font-related properties are kept 
to a minimum. Previously, it was a bit tough to guess 
where the properties of elements were coming from. 
In this version things make a lot more sense. 


UTILITY CLASSES 

Because of the decision to get rid of spacing, as 
well as the introduction of Flexbox, this version 
of Bootstrap has a number of new utility classes 
to set up the display property. So we can now 
set up an element like navigation to use the CSS 
fixed-top , fixed-bottom and even the very new 
sticky-top properties. 


Position classes 
You can also set up the display type, so you can 


make an element display as a block element, inline , 
inline-block or flex . 


.d(-BP)-TYPE 
ALN: (EES 


flex can be set up to change at different breakpoints. 


.d(-BP)(-inline)-flex 
BP: Gi >576px GB >768px G8 >992px EB >1200px 


FLEXBOX 

Flexbox is special because there are so many new 
classes related to the property. For example, you can 
set the direction of flex elements within a container. 
What Bootstrap adds to the traditional Flexbox 
classes is the ability to control these elements on 

a breakpoint-by-breakpoint basis. 


flex(-BP)(-DIR)(-reverse) 
BP: Gi >576px GB >768px HB >992px EB >1200px 
DIR: 


Attaching Flexbox to a grid makes it much more 
powerful and easier to execute. If you’ve used 
Flexbox before, you’ll know that row or column 
makes your items float next to one another or simply 
appear stacked up on top of one another. But there 
are a lot more options. justify-content controls the 
spacing of the internal elements and makes it super 
simple to centre content - something that required 

a table display or some other crazy tricks before. 


justify-content(-BP)-ALG 
BP: G3 >576px GB >768px G8 >992px EB >1200px 
ALG: EE 


wrap lets you control whether the elements wrap in 
relation to the space in their container. There are two 
options: either wrap the elements or don’t wrap the 
elements. You can also include an extra keyword to 
reverse the order of the elements. 


flex(-BP)-WRP(-reverse) 
BP: G3 >576px GB >768px G8 >992px EB >1200px 
WRP: SE 


Vertical alignment does what you’d expect: controls 
the alignment of elements vertically. As well as the 
breakpoints, you can either put the elements towards 
the beginning or the end, centre them vertically, put 
space in-between or around, or finally stretch the 
elements to fit the container. 


align-content(-BP)-ALG 
BP: G3 >576px GB >768px G8 >992px EB >1200px 
ALG: EE 


One of the traditional ways to control the flow of 
elements is to float them so they appear side by side. 
The classes to do that are float and then an optional 
breakpoint, plus either left, right or none, just like 
in CSS. When you float elements, the container is 
unable to track the height of an element unless you 
use a clearfix trick, which clears the floats. To do 
that, Bootstrap provides a clearfix class as well. 


float-(BP)-SID 
BP: G3 >576px GB >768px G8 >992px EB >1200px 
SiD: [a 


One of the things that feels odd is that there are all 
sorts of margin and padding classes. You’re going to 
want to resist this, but they’re useful because they 
have breakpoints associated with them, which is 
super-helpful for responsive design. 


PRO(SID)(-BP)-SIZ 

PRO: GJ margin §§ padding 

SIDE EBB 

BP: G3 >576px G3 >768px © >992px EB >1200px 
siz @ 


Flexbox layout A simple responsive group of elements that are set up by default to stack on top of one 
another at the medium breakpoint 


Let’s take a look at an example that uses a lot of 
these elements in practice. 


<div class="container bg-danger"> 
<div class="bg-warning text-center d-flex flex-column 

justify-content-center flex-md-row"> 

<div class="item bg-info px-md-2 py-2 mr-lg-2" >Exotic</ 
div> 

<div class="item bg-info px-md-2 py-2 mx-lg- 
2">Grooming</div> 

<div class="item bg-info px-md-2 py-2 mx-lg-2">Health</ 
div> 

<div class="item bg-info px-md-2 py-2 mx-lg- 
2">Nutrition</div> 

<div class="item bg-info px-md-2 py-2 mx-lg-2">Pests</ 
div> 


<div class="item bg-info px-md-2 py-2 ml-lg- 


2">Vaccinations</div> 
</div> 


</div><!-- container --> 


Check out the CodePen at netm.ag/display-292 to play 
around with these properties. In the images shown 
above, you can see a responsive group of elements 
that are set up, by default, to stack on top of one 
another at the medium breakpoint (768px). 

There are also ways to make the Flexbox class to 
control each item inside a Flexbox container. 


align-self(-BP)-ALG 
BP: Gd >576px GB >768px HB >992px EB >1200px 
ALG: ES 


This group of tools give you incredible control over 
just about any property at the different breakpoints, > 
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IN-DEPTH 


MIGRATING 


+ The bad news is that migrating from Bootstrap 3 will be 
pretty challenging. Let's have a look at some key changes. 


Navs and navbars 
You now have to add to elements and 
to links. You can use these with or without list elements. There 
are many more alignment options now and it’s super-simple to 
control the alignment within EME}. will make the links fit 
the horizontal space, but the space of each link will be different 
depending on the width of the text. If you want the spacing 
between the links to be the same, you can use | nav-justified § 
Navbars used to be a real pain to style, but now they're a lot 
easier to handle with regular background colour classes. 


danger inverse 


You can simply use a class to change the colour of the 
background, and if you don't like those colours, you can use CSS to 
change the attribute yourself. There are two additional 
classes for controlling the colour of the text. If your background is 
going to be lighter, you can use the class and the text 
will be darker. If your background will be darker, you can use 


class and your text will be lighter. 


Images 

Another change that will immediately impact your migration 
is the slight modifications to image classes. 
is now called aan). is now and 
BERN] rounded-crce] 


Carousels 

The main thing you need to look out for is that the class is 
now called FERWES egy. There's also a lot of changes to the left 
and right arrow controls and buttons. 


Forms 
There's some key changes to form layouts, especially horizontal 
forms. It is no longer a requirement to add fifelgaabaatelardelane-ts to 
your forms. However, you now have to adda class, and of 
course your form should be inside a container. Remember there 
are different breakpoints now, so the breakpoint might not 
be wide enough. 

Where forms have changed a lot is in how you work with 
radio buttons and checkboxes. The format for the control labels 
is different, with a completely new way to handle those. 
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pm which gives you a new way to control layout. 
Interestingly, these classes can be injected by 
something like React or Angular. 


THE GRID 

Bootstrap’s grid has also been upgraded in very 
significant ways. The new grid has an extra 
breakpoint at a smaller size of 576px. The smallest 
breakpoint is no longer called XS in the grid, it’s 
simply called col. 

This means if you have references to an xs 
breakpoint, you’ll have to change them all. The 
distribution of the rest of the breakpoints have 
changed, with the largest breakpoint now called 
XL, but at the same size as the lg breakpoint. 


Bootstrap 3 Grid 


Extra Taree 
Small 5' 


Break <768px 2768px 2992px 21200px 


Width Auto 750px 970px 1170px 
class .col-xs-  .col-sm-_—.col-md- _.col-Ig- 
Bootstrap 4 Grid 


eel etn oe 
4 Small 8 Large 
Break = <576px =2576px 2768px 2992px 21200px 


Width Auto 540px 720px 940px  1140px 
class .col- — .col-sm-_.col-md- .col-lg-__ .col-xl- 


REORDERING COLUMNS 

There’s a new class that lets you delete the spacing 
within the columns called no-gutters . Although you 
can still reorganise columns using push and pull, 
there’s a new way to reorder columns using Flexbox: 
Include the word flex , then optionally a breakpoint 
as well as a keyword. However, this approach isn’t 
as flexible as push and pull. 


flex(-BP)-ORD 
BP: >576px >768px >992px >1200px 


ORD: 3 


CARDS 

There aren’t a ton of new components in Bootstrap 

4, but cards are one of the additions (although 
they’re not totally new, since they replace panels, 
thumbnails and wells). Cards help you lay out content 
into card-like containers that look great, and thanks 
to Flexbox are very easy to set up. 

To get started, you create a container with one of 
three classes. card-group gives you cards that flow 
together with shared margins in-between. card-deck 
is simliar, but with margins in-between. Finally, 
card-columns gives you a way to create the type of 


layout you see in sites like Pinterest easily. The 
content itself pretty easy to set up, but a lot more 
verbose than anything you’ve done before. 

There are classes for just about every type of 
content that fits inside your cards, with card-header 
and card-footer classes providing some additional 
formatting, and classes for special content like 
card-header-tabs to format tabs inside your cards. 

There are also lots of formatting classes you'll need 
to add to make things look great. The main container 
class for elements inside cards is called card-block 
and there are classes for titles ( card-title , card- 
subtitle ), text ( card-text ), links ( card-link ) and images 
(card-img , card-img-top , card-img-bottom ). 

Here’s some code: 


<div class="container card-deck"> 


<section class="card" id="drwinthrop"> 
<img class="card-img-top img-fluid" src="http://placehold. 
it/1200x600" alt="Doctor Photo"> 
<div class="card-block"> 
<h3 class="card-title" >Dr. Stanley Winthrop</h3> 
<h5 class="card-subtitle">Behaviorist</h5> 
<p class="card-text">Dr. Winthrop is the guardian of 
Missy, a three-year old Llaso mix, who he adopted at the 
shelter. Dr. Winthrop is passionate about spay and neuter 
and pet adoption, and works tireless hours outside the clinic, 
performing free spay and neuter surgeries for the shelter.</p> 
<a class="card-link" href="#">About Me</a> 
<a class="card-link" href="#">My Pets</a> 
<a class="card-link" href="#">Client Slideshow</a> 
</div><!-- card-block --> 
</section> 
<section class="card" id="drchase"> 
<header class="card-header"> 
<nav class="nav nav-tabs card-header-tabs"> 


<a class="nav-link nav-item active" href="#">About</a> 
<a class="nav-link nav-item" href="#">Pets</a> 
<a class="nav-link nav-item" href="#">Show</a> 
</nav> 


</header> 


<div class="card-block"> 

<h3 class="card-title" >Dr. Elizabeth Chase</h3> 

<h5 class="card-subtitle">Dentistry</h5> 

<p class="card-text">Dr. Chase spends much of her free 
time helping the local bunny rescue organization find homes 
for bunnies, such as Kibbles - a Dalmatian bunny who is part 
of the large Chase household, including two dogs, three cats, 
and a turtle.</p> 

<a class="card-link" href="#">About Me</a> 

<a class="card-link" href="#">My Pets</a> 


<a class="card-link" href="#">Client Slideshow</a> 
</div><!-- card-block --> 
<img class="img-fluid card-img-bottom" src="http:// 


Or. Elizabeth Chase 
Dernetry 


New components Cards 
are anew addition to add 
Pinterest-style layouts 
quickly and easily 


placehold.it/1200x600" alt="Doctor Gardner Photo"> 
</section> 


<section class="card" id="drsanders"> 
<img class="img-fluid" src="http://placehold.it/1200x600" 
alt="Doctor Photo"> 
<div class="card-block"> 
<h3 class="card-title" >Dr. Kenneth Sanders</h3> 
<h5 class="card-subtitle">Nutritionist</h5> 
<p class="card-text">Leroy walked into Dr. Sanders front 
door when she was moving into a new house. After searching 
for weeks for Leroy’s guardians, she decided to make Leroy a 
part of her pet family, and now has three cats.</p> 
</div><!-- card-block --> 
</section> 
</div><!-- content container --> 


Play around with the new card component using this 
CodePen: netm.ag/cards-292. 

This is also something that you'll notice in other 
places throughout the new Bootstrap: Things like 
list groups and forms follow a newer, more verbose 
format that requires you to add more classes inside 
existing components for proper formatting. Cards 
easily align elements together in a great-looking 
layout, regardless of the height of the content. 


FINAL THOUGHTS 

There’s a lot more to this new version of Bootstrap, 
and because of Flexbox, there are major changes to 
existing components. Some of your migration efforts 
will be pretty easy — you'll just end up adding a few 
classes. Others, like migrating your forms, will be 
extremely difficult thanks to the changes. 

Despite these migration headaches, this new 
version of Bootstrap is a winner. It gives us a more 
modern and consistent grid, with Flexbox classes 
tied to responsive breakpoints, that is easy to learn 
and fun to implement. 
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COLLABORATE ON 
DESIGNS WITH SYMPLI 


Max Ignatyev shows you how to use Sympli to collaborate on web and 
mobile app designs, and streamline sharing with developers 


ee Anyone who has worked on a web or mobile 
app development project has experienced it: 
the seemingly endless back and forth between 
developer and designer for all things related to 
the design. Developers asking for fonts, sizes, 
positioning and colours. Designers sending the 
latest updates of images and assets. Files sent via 
email, Dropbox, Google Drive, Slack - you name it. 
It’s a messy and time consuming process and, 
inevitably, things are lost in the shuffle. 

Well, we’ve seen it too. So we decided to do 
something about it with Sympli (app.sympli.io). We 
wanted to offer a simple way to connect designers 
and developers so that specifications, assets, notes 
and information could be easily and automatically 


shared, and make collaborating with others on 
a project much more streamlined. 

In this tutorial ’m going to show you how to 
connect your design and development teams quickly 
and easily by walking through an example in Sympli, 
Sketch and Xcode. Starting from the point you finish 
a design project, I'll explore the next steps from the 
design team’s perspective and then go through what 
happens after hand-off to the development team. 

Note, I don’t go into creating an account or setting 
up the plugins, but you can find information about 
that at sympli.io/downloads/web. While this example 
uses Sketch and Xcode, Sympli also works with 
Photoshop and Android Studio, so no matter what 
your environment, you’re covered. 


@ Mike Johinspn 


c+ 8 


Export 

x 2 Pvc 
Size Suffix Format 
Export outton_capture ch 


Step 2 Select the object you want to export and hit ‘Make exportable’ 


You've finished your 

awesome new app design 
and are ready to hand the baton 
off to your development team to 
implement it. Don’t worry, you 
don’t need to manually create 
specification documents, share 
assets or provide fonts — Sympli 
automates these tedious manual 
tasks for you. All you need to do 
is get your design loaded up in 
Sketch and make sure you have the 
Symopli plugin for Sketch installed 
and working. 


Before exporting your design, 


make sure your visual assets 
are marked as exportable, and 
Sympli will automatically generate 
both vector and bitmap assets at 
the correct scale for your design. 
Select the object in your design and 


click Make Exportable in the bottom 
right corner of Sketch. 


Now the design assets are 


all properly configured as 
exportable, you need to export your 
design to Sympli. With the Sympli 
plugin for Sketch installed, go to 
‘Plugins > Sympli > Export to 
Symopli’ (or hit cmd+yY ). 

Select the specific artboards 
(or elements) you want to export 
within the layers tree or on the 
canvas itself. If you don’t select 
any artboards or elements, all the 
artboards within the current page 
will be exported. 


04 When exporting, you will 
be prompted to log in. Simply 
enter the email and password for 
your Sympli account. 


The artboards were exported! 


invite more people 


To invite collaborators just send 


them the link 


© Or type an emails here and we wil 
send them the link 


Step 7 Invite team members to collaborate on the project, or share via the sharing link 
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Step 6 Select your platform and choose your resolution 


Now you need to create 


anew project in Sympli to 
which your new design will be 
uploaded and shared with your 
development team. Click the Create 
New Project button. 


06 | Enter a name for your 
project, select your platform, 
and choose your resolution. If you 
are using standard artboard 
templates from Sketch, always 
select @1x for iOS or web projects, 
or mdpi for Android projects. Hit 
Create and Sympli will automatically 
generate the specifications, as well 
as the vector and bitmap assets in 
the design, and upload it all toa 
secure cloud. 


Once you've uploaded your 

project, share it with the 
team by typing in their email 
addresses (including either a 
comma or space between each 
email address) and clicking the 
Share button. Alternatively, you can 
send the project sharing link to your 
team through your team’s group 
chat or via email. 


08 | Need to update the design? 
It's simple. Just make the 
changes in Sketch and export the 
design again. Sympli automatically 
creates a new version and stores it 


in the secure cloud. Not only that, 
it will track the changes in the 


ADD COMMENTS 


Sometimes you need 

to share additional 
information about 

the design with your 
development team. In 
Sympli’s web interface, 
click the annotations 
icon on the left to add 
information and context 
for your team. When 
adding a comment, type 
‘@’ and select a team 
member to notify them 
directly. This is a great 
way for developers to 
quickly ask designers 
questions and get rapid 
feedback. 
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x Bold Title 


Step 9 Attach useful information to your designs using tags 


specifications so you can easily 
identify what changed and when, 
and view differences between 
design versions. 


09] You can organise your 
designs by tagging screens 
with any additional information that 
will help you and your team. To add 
a tag to ascreen through Sketch, 
first you need to show the tags in 
Sympli by going to ‘Plugins > Sympli 
> Show Tags’ or clicking ctrl+T. 

You can enter anything you'd like 

as a tag. It's possible to add multiple 
tags to a screen by separating them 
with commas. 


You can also tag your designs 


with helpful information 
through the Sympli web app. Tag 
multiple designs at once by holding 
shift and clicking on the design card 
and then adding the tag. 


Need to share information 


with the team about specific 
design elements? Add a comment 
to the design and/or element and 
let the team know what you are 
thinking. To add a comment, you 
must be using the Sympli web app. 
So log in at app.sympli.io, choose 
your project and design. Then, click 
the Add Comment button in the 
left-hand tool bar. Move your 
mouse to where you want to add 
your comment on the design and 
click. Type in your comment and 
hit enter to send it. 


If you have a certain person 
you want to direct your 
comment to, you can mention them 

by typing @ and their username. 
As you type, Sympli will auto-show 
matching team members from 
which you can select the correct 
person. When you mention 


INSPECT VERSION DIFFERENCES 
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Step 12 Open Sympli from within Xcode 
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Step 16 Select your project from the list within Xcode 


someone ina comment, Sympli 
sends a notification email to them 
indicating the project, design and 
location of your comment, as well 
as the text of your comment. 


Let's say you're a developer, 


and you've just been told 
that your designers have wrapped 
up the design for your company's 
new iOS app. You don't need to 
worry about going through endless 
design documents, searching for 
the specifications and assets 
associated with the design and 
manually adding them to your 
Xcode project. 


After receiving the invitation 


email, click the Accept 
Invitation button to gain access to 
the project. You must accept the 
invitation before you can see the 
project in Xcode. 


What changed? How often has a developer asked that question of a designer. 
Through Sympli’s web app, team members can visually compare design versions and 
immediately see the changes between the versions. Simply select the design in the 
web app and click the ‘Browse Changes’ link at the top to see designs side by side 
with any changes highlighted. 
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First, launch Xcode and open 


the correct app project, or 
create anew one. 


Open Sympli from within 
Xcode by clicking the Sympli 
icon in the top right of the main 
Xcode window. A panel of Sympli 
projects will open, from which you 
can select your project. Click the 


thumbnail image to load the project 
resources. 


Now your project is loaded, 
17 
you can load project assets 
by expanding the menu via the 
Sympli icon in the top right of the 


main Xcode window and choosing 
Import Assets. 


A Merge Assets dialog will 

appear, through which you 
can select the assets you'd like to 
import into the project. Any assets 
already in the project will be 
displayed, as well as all assets that 
were marked as exportable in the 
design. You can import as PNG or 
PDF by choosing the appropriate 
button at the top of the dialog. 
Then, simply check the assets to 
import, and click Import. 


You can edit asset names 
by clicking the pencil icon. 
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Step 18 Load project assets via the Sympli icon 


Through the import menu you 
can also import the fonts from 
the design through the Import 
Fonts options. 


Sympli lets you export 
multiple assets at a time. To 
do this, simply select one or more 
shape layers in the mockup (click 
on several elements while holding 
down the Shift key) and then click 
Export in the details panel on the 
right. Sympli will then automatically 
generate vector PDF assets from 
the selected layers. 


In order to see the properties 
and styles within the design, 
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Step 21 Select a component in the layout view of the Sympli plugin to see its properties and styles 


you can select the component 
directly through the layout view in 
the Sympli plugin. Alternatively, click 
the layers option in the inspector 
and expand the layers to select 
whichever component you wish 

to focus on. 


Now comes the cool part 
— you can simply drag and 
drop elements from the design into 
your Xcode app project and the 
assets, styles, colours, positioning 
and other attributes will be added 
automatically. Click the asset in the 
Sympli design and drag-and-drop 
to the Xcode project window — 
Sympli takes care of the rest. 
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Step 24 You can compare different versions of the design, side by side 


You can easily apply styles 


to a view by selecting an 
element in the mockup and holding 
the ctrl key down while dragging it 
to the app’s screen. 


Did the design team change 
= 


something? No worries. 
Sympli’s plugin tracks design 
changes and lets you compare 
versions to see the differences. 
If your design has multiple versions, 
you'll see a button labelled # 
versions (where the # is the number 
of versions). Click that button to 
view and compare the different 
designs. Use the arrow buttons 
below the version preview to move 
between versions. 


Not enough detail? Open the 


Sympli web app version diff 
tool and see versions side by side 
with the differences highlighted. 
Clicking the highlighted differences 
allows you to view the exact 
changes that were made. 


Sharing designs and 
collaborating with 
teammates on a project is simple 
when using Sympli to connect 
different teams. Try it on your next 


project by creating a free account 
at app.sympli.io/signup. EY 


TEAM 
MANAGEMENT 


Starting a new project 
with the same team as a 
previous project? Quickly 
add all your previous team 
members through the 
project sharing dialog. 
Simply click the ‘Add 
Teammates’ tab and click 
the previous project in the 
list to automatically select 
all the team members 
that had access to that 
project. Then adjust the 
permissions/roles for each 
team member and click 
‘Update Access’. 
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CREATE STORYBOARDS 
EASILY WITH BOORDS 


James Chambers teaches you how to get started with creating 
storyboards effortlessly with Boords, the new app on the block 


Boords started as a conversation over a burger. 

Myself and childhood friend - and fellow 
founder of animation studio, Animade — Tom Judd, 
were bemoaning the painstaking process of 
formatting and editing storyboards, and wondering 
why on earth there wasn’t an easier way. Then the 
thought struck us — why don’t we make one? 

Twelve months later, Boords has been helping 
creatives the world over save time, hassle and the 
occasional desire to break a computer. Boords is a 
web-based storyboarding app that makes it easy to 
create perfect storyboards quickly and easily. For us, 


it was the beginning of the end of those familiar old 
pain points of copying, pasting and renumbering 
every time an edit was needed, and it’s beena 
pleasure to see how it’s becoming a game changer for 
the wider world of storyboarders too. 

And it really is for anyone who needs to make 
storyboards, in whatever field. Having originally 
built Boords with animators and filmmakers in 
mind, we’ve been blown away by the amazing range 
of industries who’ve made it part of their workflow, 
including advertisers, UX designers, documentary- 
makers, teachers, writers... even space agencies. 


This year, with the latest additions of an in-app 
drawing tool and support for working in teams, 
Boords has taken its next big leap forward. 

Here’s a rundown of how it all works, and what you 
can get out of it. 


OVERVIEW: 

Boords lets you drag and drop images straight into 
the app, or draw directly into a frame to make a 
storyboard instantly. You can drag frames around if 
you need to reorder them or you can insert new ones, 
and they’ll all be renumbered accordingly. Add your 
notes, like action and VO, then when you’re happy 
with it you can export your storyboard as a PDF 
ready to send to clients, or share it via a password- 
protected link. With a Team plan this can all be done 
collaboratively, too. 


With a Pro or Team 
plan, the drawing tool 
lets you sketch directly 
into frames 


GETTING STARTED: 

© To get started, head to boords.com and pop in 
your email address to get yourself a free account. 
Then you’re in! 

@ Create a new storyboard, then drop in images 
from your computer and they’ tumble into 
place. Or, you can draw directly into a frame (I’ll 
come back to this in a moment). 

© Drag and drop to rearrange frames, and add 
more if you need. You can also insert new frames 
between existing ones. They’ll always fall into 
place with the correct numbering. 

© Add your notes, like titles, action and sound. You 
can tab through to make it quicker. 

@ If you need to make new versions of a 
storyboard, you can do this while keeping all 
previous versions safely in an archive, which you 
can go back to any time. 


With a Pro or Team plan, the drawing tool lets you 
sketch directly into frames. We find this is perfect 
for quick scamps or when you’re starting an idea 
from scratch. 


© Click the paintbrush icon in the frame, and the 
drawing tool will pop up. 

© Get drawing! There’s a select choice of colours 
and pencil thicknesses, and the eraser and undo/ 
redo buttons are there if you need them. 


When you’re ready to share your storyboard with 
your clients or teammates, you can export the 
storyboard as a super-slick PDF. This can be made of 
several pages, including a cover page that’s tailor- 
made to you. 


@ Click the PDF icon in the toolbar. 

@ Tweak your settings as you like, then hit 
‘Create PDF’ - and out comes a lovely, perfectly 
formatted document perfect for impressing your 
clients with! 


You can also share your storyboards via a private 
link. This is a speedy way to show progress to 

your clients or teammates, all whilst keeping it 
confidential. Online sharing makes it easy for others 
to review, so any amends can be implemented swiftly 
and without hassle. 


® Click the Shareable view button, then change the 
password if you like. A button in the top-right 
corner will reveal your private URL, ready to copy 
and share with whoever you choose. 

© Viewing is quick, simple and accessible from any 
device you choose. 


A Team plan lets you collaborate with other people 
on the same storyboards, making your workflow 
run like a dream with creative companions, clients, 
producers and whoever else wants to get involved. 


® You can add as many people as you like to your 
Team. You can always add more people later, too. 

@ Each new teammate will get an instant 
invitation, allowing them to get storyboarding 
with you in a flash. 


So that’s Boords in a nutshell! As a small team 
ourselves, we really value our users’ opinions and 
love finding out how we can keep making the app 
even better for them. Support is available via the 
Intercom feature on boords.com, so you can talk 
directly to our team of creators and producers who 
are always ready to listen to feedback and answer all 
of your queries. 

Since the product was born out of our own 
animation studio, the Animade team has used it 
every day for their work and helped it grow and 
evolve. This means our team of developers, who sit 
side-by-side with our animators, are getting a first- 
hand understanding of what is really needed ina 
storyboarding tool — and what works for the people 
who use it. 

Give it a go at boords.com and see how much time 
you can save on your storyboarding process! 
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MAKE YOUR 


APPS SERVERLESS 


Entire applications can now be built without having to deploy code to 
your own servers. Steve Faulkner introduces the serverless revolution 


& In 2016, we witnessed the rapid rise of anew 
buzzword: serverless. At face value, the term 
makes it sound like servers no longer exist. Of 
course, this is absurd. Every serverless application 
is running on a server somewhere. What has really 
changed is that servers are no longer a primitive 
exposed to the application developer. Platforms 
and services have matured to the point that entire 
applications can be successfully built without 
deploying code to your own servers. 

While the term ‘serverless’ may be misleading, 
the value of delegating server management to a 
third party is very real. The dream of spending less 
time worrying about servers and more time building 
software can be a reality, and we’ve seen this exact 
scenario play out at Bustle. 


SERVERLESS IN ACTION 

We serve content to over 50 million unique 

readers a month, which means traffic at our scale 

is significant but also sudden, as articles can go viral 
at any moment. Our legacy VM-based infrastructure 
was having trouble keeping up and our engineers 
were spending too much time on operations. We 


started looking at serverless platforms as a solution 
and, after a few successful experiments, began 
moving over our entire stack. It has been a complete 
success; our projects are more maintainable, easier 
to operate, and cheaper. 


AMAZON WEB SERVICES 

It is difficult to talk about serverless without 
focusing on Amazon Web Services (AWS). AWS 

has become synonymous with serverless because 
it answers one critical question: Where does the 
custom code go? The concept of using third-party 
services and platforms is not new. Databases, push 
notifications, caching, and many other layers of an 
application have all been available ‘as a service’ for 
a while, but they sat on the edge of your application. 
You still needed a place for core application code, 
which was usually a server (and often many of 
them) responding to external requests. 

This is where AWS came in. Its products AWS 
Lambda and AWS API Gateway exposed primitives 
that made it simple to deploy custom application 
code without the overhead of managing your 
own servers. 


LAMBDA 

Lambda is Amazon’s version of functions-as-a- 
service (FaaS). It is quite simple: you write code 

and upload it - though currently only Node.js, Java, 
Python and C# have official support. AWS will 

then run that code in response to events including 
HTTP requests, S3 uploads, DynamoDB updates, 
Kinesis streams, and many others. Scaling happens 
automatically and you are only charged when your 
functions are running. 

None of these features are strictly a requirement 
for serverless, but AWS has certainly set the bar 
high. Any serverless platform will likely have a 
stateless FaaS offering with very granular billing 
because of the precedent set by AWS. 


OTHER PLATFORMS 

Amazon may have the lead, but other providers are 
catching up quickly. All the major cloud platforms 
have recently launched services targeted at 
serverless applications. Here are a few: 


@ Google Cloud Functions: Still in alpha, this 
provides similar functionality to AWS Lambda 
and can also be triggered by HTTP requests. 

@ Azure Functions: This is also similar to Lambda 
and still relatively new. Azure has a pleasant UI 
and makes it easy to expose functions over HTTP 
without needing a separate routing service. 

@ IBM OpenWhisk: The only major serverless 
platform that is open source. If you are interested 
in deploying your own serverless platform or just 
curious how they work under the hood, you will 
want to investigate this. 


CHALLENGES 

Serverless does not come without its challenges. 
The space is new and as such, the community is 
still discovering best practices - especially when it 
comes to operations. I’ve seen people assume that 
no servers also means no operations. This could 
not be further from the truth. 

My favourite definition of operations comes from 
Charity Majors (charity.wtf): “Operations is the 
constellation of your org’s technical skills, practices, 
and cultural values around designing, building and 
maintaining systems, shipping software, and solving 
problems with technology.” This beautifully captures 
how integral operations is to any software team, and 
serverless does not change that. More than ever we 
are in need of tools for deploying, maintaining and 
monitoring our applications. 

Unfortunately, having no access to the server 
means we are unable to use many tools that have 
been battle-tested over the last couple of decades. 


I anticipate that 2017 will see many new startups’ 
third-party services targeted at solving these 
problems for serverless developers. Some companies 
have already sprouted up or modified existing tools, 
including IOpipe and Honeycomb. io. 


TOOLS 
The open source community has recognised some 
of these challenges and responded with a wide 
range of tools and frameworks specifically targeting 
serverless. Here, the market dominance of Amazon 
is apparent, as most only currently support AWS. 

Of course, it is possible to manually build and 
deploy serverless applications yourself, but I would 
not recommend it — with even a few endpoints, 
building, packaging, zipping, uploading and 
versioning all become difficult to manage. 

Here are just a few of the frameworks out there 
for you to consider: 


@ Serverless Framework (netm.ag/serverless-292): 
This is the oldest and most established framework 
for building serverless applications. It has a 
robust plugin system and integrates with many 
community-developed plugins. Its stated goal is 
to eventually support deployment to any of the 
major cloud platforms. 

@ Apex (apex.run): This is written in Go but supports 
Python, Node.js, Go and Java runtime languages. 

The creator, TJ Holowaychuk, is a fixture in the 
open source community and has a great sense of 
what makes for good developer tools. 

@ Chalice (netm.ag/chalice-292): The only 
framework created and maintained by AWS. 

It currently just supports Python. 

@ Shep (netm.ag/shep-292): Bustle’s own open source 
framework, used for all our production services. 

It focuses exclusively on the Node.js runtime and 
strives to be opinionated about how you should 
structure, build, and deploy applications. 


THE FUTURE 

2017 will continue to see the rapid adoption of 
serverless technologies by everyone from startups to 
fortune 500 companies. Even in its nascent state, the 
serverless movement is a significant step forward 

in enabling teams to build better software. That has 
been our experience at Bustle, and I’ve talked to 
engineers at other companies with similar stories. 
Capital One, iRobot, and Nordstrom have all talked 
publicly about their adoption of serverless. 

Servers will never fully go away, but it is a joy to 
build software and let someone else worry about 
them. If it fits your use case, I highly recommend you 
consider serverless for your next project. BI 
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0 ESSENTIAL TIPS 
FOR SUPERFAST CSS 


Jeremy Wagner explains how to hasten page rendering 
by cutting the excess from your site’s CSS 


Have you thought about the size of your site’s 

CSS? If your style sheet is ballooning, it could be 
delaying page rendering. Though CSS isn’t the largest 
asset type you’ll serve, it’s one of the first that the 
browser discovers. Because the browser is blocked 
from rendering the page until CSS is downloaded and 
parsed, you want to keep it lean as possible. Here’s 
some tips to help you get there. 


1 USE SHALLOW SELECTORS 

Your parents told you that shallowness isn’t a virtue, 
but when it comes to CSS, they’re wrong. Used 
consistently, shallow selectors can trim kilobytes 
off big style sheets. Take this selector: 


nav ul li.nav-item 


This could be expressed more succinctly: 


Nav-item 


As well as helping to keep your CSS svelte, the 
browser will also render the elements targeted 


by shallow selectors faster. Browsers read selectors 
from right to left. The deeper selectors are, the 
longer it takes for the browser to render and 
re-render the elements those selectors are applied 
to. For complex DOMs that reflow often, short 
selectors can also cut down on jank. 

Ideally, you want selectors to be as shallow as 
possible, but this doesn’t mean you should cut 
everything down to the bone. Sometimes you need 
additional specificity to extend components. Strike 
the right balance, but be pragmatic, too. 


2 USE SHORTHAND PROPERTIES 

This seems like common sense, but you’ll be 
surprised at how often I see longhand properties 
used needlessly. Here’s an example of some 
longhand properties in use: 


font-size: 1.5rem; 
line-height: 1.618; 
font-family: "Arial", "Helvetica", sans-serif; 


That’s a lot of CSS! Let’s tidy that up: 


font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif; 


The font shorthand property condenses several 
declarations into a handy one-liner that takes up 
much less space. 

In the example shown above, the shorthand uses 
about 40 per cent less space than its longhand 
equivalent. It’s not as readable at first glance, 

but the syntax becomes second nature after you’ve 
spent some time using it. 

Of course, font isn’t the only shorthand available 
to you. For example, margin can be used in place of 
longer properties such as margin-top , margin-right 
and so on. 

The padding property works the same way. For 
more ways to clean up your CSS, Mozilla Developer 


Network offers a helpful list of shorthand property 
references (netm.ag/shorthand-292). 

What if you need to override a value further 
down in the cascade? For example, let’s say you have 
a heading element that needs to change its font size 
for larger displays. 

In this case, you should use the more specific 
font-size property instead: 


hif 
font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif; 
} 
@media (min-width: 60rem){ 
h1f 
font-size: 2rem; 


This isn’t only convenient, it also increases 
component flexibility. If any other part of the 
underlying font property is modified, those changes 
will percolate up to larger displays. This works 

great for component overrides where a new context 
requires a different treatment. 


USE THE PRELOAD RESOURCE HINT 
The preload resource hint can give the browser a 
head start on loading your site’s CSS. The preload 
resource hint tells the browser to initiate an early 
fetch for an asset. 


FOCUS ON 


SASS/LESS AND 
NESTED SELECTORS 


+ If you use Sass or Less and want to keep selectors short, 
keep an eye on nesting. While nesting provides a convenient 


visual representation of selector hierarchy, it makes for longer 


selectors when compiled to CSS. Consider this snippet: 


nav{ 
ulf{ 
li.nav-item{ 
color: #333; 


This rule compiles like so: 


nav ul li.nav-item{ 
color: #333; 


If nesting gets too deep, you'll be adding a lot of weight to your CSS 
in no time, so pay attention to it. 


aie 
ar 


i ——_ 


Heavy CSS Nested selectors in Less or Sass can quickly add weight to your CSS 
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RESOURCES 


EXPLORE FURTHER 


+ For more ways to slim down your CSS, take a look at the 
following resources: 


SHORTHAND PROPERTY REFERENCE 
netm.ag/shorthand-292 

Shorthand properties can go a long way in slimming down your 
style sheets. Check out this reference on MDN if you want to pick 
up some new shorthand rules. 


PRELOAD W3C SPECIFICATION 
www.w3.org/TR/preload 

The resource hint gives the browser a head-start on 
loading a specified asset. On HTTP/2 servers, it initiates a server 
push event, conferring benefits similar to inlining CSS. 


CSSCSS 


zmoazeni.github.io/csscss 
Redundant rules can add a lot of unnecessary bulk to your CSS. Use 
csscss to uncover those rules so you can de-duplicate them! 


CSSNANO 


cssnano.co 
cssnano is a PostCSS-based tool that minifies CSS and makes 
further focused optimisations to ensure your CSS is as small as 
it can possibly be. 


GULP 


gulpjs.com 


gulp is a Node-based build system. You can use it to automate 
cssnano optimisations on your CSS (and way, way more than that). 
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CSSCSS 


Remove duplications csscss willanalyse any CSS files you give it and let you 
know which rulesets have duplicated declarations 


You can set it asa <link> tag in HTML: 


<link rel="preload" href="/css/styles.css" as="style"> 


Or as an HTTP header in your server configuration: 


Link: </css/styles.css>; rel=preload; as=style 


In both of these scenarios, preload gives the 
browser a head-start on loading /css/styles.css . Using 
preload in an HTTP header is preferable, since this 
means the browser will discover the hint earlier 
in the response headers, instead of later on in the 
response body. 

Another reason to use preload in an HTTP 
header is that it will initiate a server push event 
on most HTTP/2 implementations. Server push is 
a mechanism by which assets are preemptively 
pushed to the client when requests for content are 
made, and it offers performance benefits similar to 
inlining CSS. 

Server push isn’t available on HTTP/1. However, 
using preload in an HTTP/1 environment can still 
improve performance. 


CULL REDUNDANCIES WITH CSSCSS 
It can pay to check your CSS for duplicate rules with 
a redundancy checker. Take the Ruby-based tool 
csscss, for example. 

Ruby users can install it with: 


gem install csscss 


Once installed, you can examine your CSS for 
redundancies like so: 


csscss -v styles.css 


cssnano compresses your css. 


And, it plugs into your existing setup. 


What it does 


CEnnere tenes you ricely formatted CSS and ruse it through many focused optiminations to enaure that the fins! resus is 28 eral 


a possible for # producter envrorment 


Fully optimised cssnano takes your nicely formatted CSS and runs it through many focused 
optimisations, to ensure that the final result is as small as possible for a production environment 


This command lists which selectors share rules that 
you can de-duplicate to save space: 


{h1} AND {p} share 3 declarations 
- color: #000 
- line-height: 1.618 
- margin: 00 1.5rem 


You can move duplicate rules under one selector: 


h1, pf 
color: #000; 
line-height: 1.618; 
margin: 0 0 1.5rem; 


} 


You’d be surprised at how much space this process 
can save in large projects. Use the --help option 
to see more commands you can use to tweak 
things further. 


5 GO THE EXTRA MILE WITH CSSNANO 
For the cherry on top, you can use cssnano — a node 
and PostCSS-dependent tool. cssnano not only 
minifies CSS, it makes many focused optimisations 
that can reduce your CSS even further. 

Install it on your system with npm like so: 


npm i -g cssnano-cli 


Then use it to optimise your CSS: 
cssnano styles.css optimized-styles.css 
If running commands ad hoc isn’t your style, you can 


automate cssnano with a build system. Here’s how to 
use cssnano in a gulpfile: 


“Buikis can be the most awtul sinkhole for teams to 
waste thew tne with - guip is a serious win for any 
project.” 


Workflow enhancement Use Gulp to automate painful or time-consuming tasks 
in your development workflow 


const gulp = require("gulp"); 
const postcss = require("gulp-postcss"); 
const cssnano = require("cssnano"); 


const buildCSS = ()=>{ 

return gulp.src("css/styles.css") 
.pipe(postcss([cssnano()]) 
.pipe(gulp.dest("css/optimized")); 
}; 
const watch = ()=>{ 

gulp.watch("css/styles.css", buildCSS); 
}; 
exports.buildCSS = buildCSs; 
exports.watch = watch; 


The buildCSS task reads the CSS you write in 
css/styles.css , and then pipes the optimised output 
to the css/optimized directory. The watch task 
kicks off buildCSS whenever changes occur in 
css/styles.css . 

The watch task can then be invoked in the 
terminal like so: 


gulp watch 


With some tweaking, you can build a workflow that 
performs this specific optimisation in addition to 
other CSS-related tasks, such as building Sass/Less 
files, autoprefixing and more. 


WRAPPING UP 

With these techniques at your disposal, you’re 
ready to whip your CSS into fighting shape. If 
you’re having trouble with any of the concepts or 
tools covered here, check out the Resources boxout 
on the opposite page for more information. Happy 
performance tuning! 9 
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USER TIMING API 


Aurelio de Rosa introduces an API to help 
you measure your code’s efficiency 


Often we need to measure the execution time 

of our code to find possible bottlenecks. The old 
way of measuring performance was to introduce a 
bunch of variables in one or more files, which would 
store the current time and then calculate the time 
elapsed. Sometimes it was also necessary to make 
these variables global, which could lead to clashes 
with other defined variables. An API that facilitates 
this task is the User Timing API. 

The User Timing API (netm.ag/timing-292) defines 
interfaces and methods to measure the performance 
of our code without the need to introduce variables. 
It deals with two main concepts: Mark and Measure. 

A Mark expresses an instant (a timestamp); 

a Measure expresses the time elapsed between 
two Marks. These concepts are represented by 

the PerformanceMark and the PerformanceMeasure 
interface respectively. Objects implementing these 
interfaces expose four read-only properties: 


@ name: Used to identify and retrieve the object 

@ entryType : The object’s type (Mark or Measure) 

@ startTime : A DOMHighResTimeStamp , which 
represents a highly accurate timestamp. If the 


object is a Mark, startTime expresses the time it 
was created; otherwise it contains the value of the 
start Mark 

@ duration : If the object is a Mark, the value is always 
0 ; otherwise it contains the time elapsed between 
the two Marks 


The API exposes four methods that belong to the 
window.performance object: mark(name) creates a Mark 
with the associated name; clearMarks([name]) deletes 
one or all of the stored Marks; measure(namel[, mark1[, 
mark2]]) creates a Measure with the specified name 
that stores the time elapsed between two Marks; 
and clearMeasures([name]) deletes one or all of the 
stored Measures. 

To see this API in action, imagine you need to write 
a function to find all the beers in a list of drinks. You 
come up with two solutions to this problem, and you 
want to find which one is faster. 


performance.mark(‘start1'); 
Drinks.findBeers(); 
performance.mark(‘end1’); 
performance.measure('V1', 'start1', ‘end1'); 


This code stores the time before and after running 
findBeers() as Marks named start1 and end1 
respectively. Then, it creates a Measure named V1 to 
store the time elapsed between the two Marks. Using 
the same approach you can store the performance of 
the other solution. 

Once stored, you can employ getEntriesByType(type) 
and getEntriesByName(name) to retrieve Marks and 
Measures. Both belong to the performance object 
and are defined in another specification. The former 
returns an array of objects of the type specified 
(i.e. mark for Marks). The latter returns an array of 
the objects with the name specified. This also means 
the names passed to mark() and measure() can be 
reused. The arrays returned are sorted based on 
the startTime property. 

So, if we had to retrieve the previously stored 
Measure, we could write: 


const measure = performance.getEntriesByName(‘V1')[0]; 


A demo showing these methods at work can be found 
on JS Bin (netm.ag/jsbin-292). This API is supported by 
all major browsers, including IE 10+, but not Safari. 

If you want to polyfill Safari or some older browsers, 
you can use UserTiming.js (netm.ag/polyfill-292). 


Aurelio (audera.it) is a frontend engineer at Facebook, and is in love 
with HTML, CSS, Sass, JavaScript and PHP. He's a member of the 
jQuery team and an expert in JavaScript and HTML5 APIs 
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CREATE A SYNTHESIZER 
WITH WEB AUDIO 


Mark Hynes explains how to use the Web Audio API to create 
a virtual instrument based in your browser 


ES In this tutorial, we are going to use JavaScript to 
create a web-based synthesizer instrument that 
can be played with the computer keyboard or a MIDI 
device. The Web Audio API will be used for sound 
generation, jQuery will handle events like button 
clicks and we’ll use a bit of Handlebars.js to help out 
with the HTML templates. All the files you need can 
be found in the GitHub repo at netm.ag/synth-292. 

There are no special build tools required so it’s 
really simple to get up and running: just download 
the files and place them on your local server. It’s a 
good idea to have the files open whilst reading the 
article as only the main points will be covered in 
detail and the code samples will be shortened. 


FILE SETUP 

First, let’s take a quick look at the structure of the 
app. There are three main JavaScript files; these 
work in a similar way to how a class would work in 
other languages and can all access the properties and 
methods of the others. 


The app.js file is where our application begins. 
The init() function in here is called immediately on 
load, it is used to initialise everything else and create 
an instance of the synthesizer. 

The uijs file handles all the user input, like a 
knob movement or a key press from the keyboard, 
and forwards those messages to the synth object. 
It’s also responsible for updating the user interface 
when required (after loading a preset, for example). 
Keeping the user input completely separate from the 
synth means it will be easy to expand the app and 
create more instruments in the future, which can be 
controlled via the same uijs file. 

synth.instrumentjs is the main file we will be 
looking at and contains the sound generation 
code. It’s different from the other files as it isa 
prototype object, which means multiple instances 
can be created. This will be useful if the app is to be 
extended to support more than one instrument. 

You'll notice the index.html file is very minimal and 
contains almost no HTML, just a single div element 


that our synth will be placed into. The HTML and 
CSS for the synth is within a Handlebars template 
called synthview.html and is pulled in via Ajax when 
an instance of the synth is created. This again makes 
it easier to add new instruments. Using Handlebars 
allows us to pass data into the template and use 
loops for repeating sections of HTML. 


AUDIO CONTEXT 
The first step in creating a web audio app is to create 
an AudioContext object. This is used to create building 
blocks called nodes that allow us to create things 
like oscillators and filters, which can be connected 
together in different ways to manipulate the sound 
passing through them. 

It also keeps a precise track of time, which means 
it can be used to schedule events. For example, a 
volume fade starting in three seconds and lasting 
two seconds. Creating an audio context: 


Var context = new (window.AudioContext || window. 
webkitAudioContext)(); 


The audio context is created within the appjjs file. 
This is then passed into the synth object on creation: 


var app = { 


context: new (window.AudioContext || window. 
webkitAudioContext)(), 
synth: null, 


init: Function(){ 
ui.init(); 
app.createSynth(); 
}, 


createSynth: function(){ 
app.synth = new synth({context: app.context}); 
} 


GENERATING SOUND 

To actually generate some sound, we need to use 

the AudioContext to create some audio nodes and then 
connect them together. A very basic synth would 
consist of an oscillator node playing a frequency, 
which would then connect toa gain node to amplify 
that frequency, finally connecting to a destination 
node which would be your computer speakers. 


var oscillator = context.createOscillator(); 
var gain = context.createGain(); 


FOCUS ON 


ADSR 


+ ADSR stands for attack, decay, sustain, release. ADSR 
envelopes are a major part of most synths and are used to 
control the timbre of the sound over a duration of time. Usually, 
an ADSR envelope controls the volume and a separate envelope 
controls the filter cutoff frequency. 

Here is how an ADSR envelope is applied to a volume control: 


Attack 

The attack value represents the amount of time the sound takes 
to move from O to full volume. Piano-type instruments will reach 
full volume almost instantaneously, whilst a violin stroke fades 
gradually from O to full volume. 


Decay 

This is the amount of time it takes to move from the attack value 
(full volume) to the sustain value. Most physical instruments start 
off with a loud sound and then quickly fade in intensity. 


Sustain 
The volume level that the sound will remain at after the decay 


time (until the note is released). Sustain differs from the other 
parameters, as it represents a volume level rather than an amount 
of time. 


Release 
After a key is released, the envelope enters the release phase. This 
is the amount of time it takes for the volume level to return to 0. 


ADSR envelopes can be used to automate almost any parameter of 
a synth to create a more natural or interesting sound. 


> 


i 


Note pattern The acronym ADSR refers to the timbre of a sound over time 
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RESOURCES 


FURTHER 
READING 


+ The Web Audio AP1 is still a fairly new and exciting addition to 
the browser toolkit. Check out some of the resources below 
for more info. If you are new to synthesis and sound design, the 
first link will be particularly useful. 


Beginner's guide to the synth 
netm.ag/guide-292 
A history of synthesizers and how they work. 


Web Audio Weekly 

www.webaudioweekly.com 

A newsletter full of interesting projects, news and stories related 
to web audio. Published not quite weekly. 


Tuna 

github.com/Theodeus/tuna 

Tuna is an effects library for the Web Audio API, and includes 
effects like overdrive, delay, bitcrusher and more. The effects 
can be treated just like any other web audio nodes. 


Web MIDI API 

webaudio.github.io/web-midi-api 

The Web MIDI API can be used to receive data from a connected 
MIDI device such as a keyboard or drum machine. This can make 
a great companion to a Web Audio app. 


Acid Machine 2 

www.errozero.co.uk/acid-machine 

A Web Audio app that simulates two classic TB-303 synths and 
a drum machine. 


Penern 
@eeeecoceeoeeo 
eeeseeeuvee0e 


Rave material Errozero has created a Javascript-based Acid Machine that will let 
you start a rave at work straight from your Chrome browser 
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oscillator.frequency.value = 440; 


oscillator.connect(gain); 
gain.connect(context.destination); 
oscillator.start(); 


This will play a continuous sine wave tone at 440hz 
(or the musical note A4). 

That’s the basics of generating a sound, but it 
doesn’t sound very musical and we can’t control the 
pitch or volume. Let’s move on to the main part of 
this app: the synthesizer module. 


SYNTH 
This synth is polyphonic, meaning that it can play 
more than one note at a time (it can actually play 
eight simultaneously). In order to do that we need to 
create a set of nodes for each voice. 

Each voice consists of: 


Two oscillator nodes 
One gain node (for the amplitude ADSR envelope) 
One filter node (for the filter ADSR envelope) 


When the synth first plays a note, it will play 
through voice one; the next note will play through 
voice two; and so on until it loops back around to 
voice one again. This way we can make sure the first 
note has plenty of time to fade out after the key is 
released. The synth uses two oscillator nodes per 
voice, which can create a warmer sound, especially 
when one is detuned slightly against the other. 

The nodes are created in a function called 
createNodes : 


for(var i=0; i<this.polyphony; i++){ 
var voice = []; 


for(var oscNum=O; oscNum<this.oscsPerVoice; oscNum++){ 
var osc = this.context.createOscillator(); 
osc.type = ‘sawtooth’; 
voice.push(osc); 


} 


for(var key in voice){ 
voice[key].start(); 


} 


var amp = this.context.createGain(); 
amp.gain.value = 0; 


var filter = this.context.createBiquadFilter(); 
filter.frequency.value = this.filterMinFreq; 
filter.Q.value = 10; 


filter.type = ‘lowpass’; 


this.oscNodes.push(voice); 
this.ampNodes.push(amp); 
this.filterNodes.push(filter); 


These are then connected together in the 
connectNodes function. 


ENVELOPES 


The oscillator nodes created in the previous step 
were set to start playing immediately, but we can’t 
hear them yet as they are running through a gain 
node set to 0. We’ll use an ADSR envelope to modify 
the value of the gain node when a key is pressed 

on the keyboard - this will ramp the volume up 


We’ll use an ADSR 
envelope to modify the 
value of the gain node 
when a key is pressed 


to maximum and then fall back to 0. The amount 
of time this takes will be set by the positions of the 
amp envelope knobs on our synth. 

Here’s a basic example of the attack part of the 
gain ADSR envelope: 


ampNode.gain.cancelScheduledValues(currentTime); 

ampNode.gain.linearRampToValueAtTime(0, currentTime + 
0.01); 

ampNode.gain.linearRampToValueAtTime(1, currentTime + 
attackTime + 0.01); 


First, cancelScheduledValues() is called, which 

cancels any previously scheduled events. Then we 
call linearRampToValueAtTime() , which very quickly 
ramps the volume down to 0 ready for the next 
attack phase. The volume cannot be set to 0 
instantly, as there would be an audible click. Finally, 
linearRampToValueAtTime() is called again to ramp the 
volume up to 1(the maximum), in the time specified 
by the attackTime variable. 

Check out the functions called ampEnvelopeStart() 
and ampEnvelopeEnd() in the synth file to see exactly 
what is going on. There are also similar functions 
for the envelope filter. 


PLAYING NOTES 


Now we have all of the nodes and envelope functions 
in place, we can look at how to send a message in to 


the instrument to trigger a note. This process starts 
with the ui,js file, which is listening for key presses 
on the keyboard. 

Here’s what happens once a key press is detected: 


var midiNote = this. keyCodeToMidiNote(keyCode); 


if(midiNote){ 
this.keysDown[keyCode] = midiNote; 
app.synth.noteOn(midiNote, 127); 

} 


This keycode is passed into a function called 
keycodeToMidiNote , which returns a midi note number. 
This number is then passed into the synths noteOn 
function, which converts it into a frequency and sets 
the value of the two oscillators to match the note 
that was pressed. 

Once the frequency has been set, the volume and 
filter ADSR envelopes are started with the functions 
ampEnvelopeStart and filterEnvelopeStart . This should 
bring the sound up to an audible level and you will 
hear the note play. The speed at which this happens 
is determined by the attack value. The sustain value 
is held until the key is released, triggering the 
ampEnvelopeEnd and filterEnvelopeEnd functions. 


TURNING KNOBS 

The uijs file handles clicks on the synths control 
knobs, it then measures how many pixels the mouse 
has moved up or down and converts that to a value 
in the range of 0-127 (127 is the maximum value 

a midi device can receive). Using midi values like 
this makes it easy to add in support for real midi 
controllers later on. 

The value is passed into a function within the 
synth called setControlValue . This is a large switch 
statement, which decides how to process the value 
it receives. 


PRESETS 

The synth has the ability to load preset sounds, 

a preset is simply a collection of values that sets the 
position for each knob. You can find all the preset 
values near the top of synth.instrumentjs . 

There is also a function called dumpPresetToConsole , 
which logs all the current control values to the 
browser console. With a bit of copy and paste, it 
can be used to create your own presets, or expanded 
upon to create a proper preset save feature that uses 
local storage. 

Hopefully this tutorial and the project files that 
come along with it have given you a good base 
structure to create your own Web Audio instrument, 
or transform this one into something unique. B 
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BUILD A 360-DEGREE 
VIRTUAL VIDEO TOUR 


Rat Jiménez shows you how to combine Angular 2 with A-Frame 
to create a 360-degree virtual reality video tour 


6 Video on the web has been gaining relevance 
ever since Adobe made it available worldwide 
through the Flash plugin and websites like YouTube 
became popular. Nowadays, video continues to grow 
every year — some predictions indicate that by 2019, 
80 per cent of traffic on the web will be video 
streaming (netm.ag/traffic-292). 

The most relevant APIs are Media Source 
Extensions (netm.ag/MSE-292), which allows us to 
stream adaptive video to the users with HTTP Live 
Streaming (HLS) and dynamic adaptive streaming 
(DASH), and the combination of WebGL with WebVR. 
Together these make it possible for us to deliver 
360-degree and VR video. In this tutorial, ’m going 
to walk through an example of a VR video tour. 


ANGULAR BREAKTHROUGH 
At Byte Default we’ve been experimenting with 
some frameworks to make 360 video scenes as easy 


as possible. For us, a mix of Angular and A-Frame 
was a big deal. Angular 2 was a big breakthrough — 
it’s thanks to this we have powerful tools like the 
Angular CLI to create a boilerplate and start working 
faster. We recommend you use always the Angular 
CLI because it means you can focus on what is 
important: the code. 


CREATE YOUR PROJECT 

To create your project we need to run some terminal 
commands. First install globally the Angular CLI 

via npm install -g angular-cli, then you can set upa 
new project using ng new net-mag-vr . This will create 
a boilerplate with some classes ready for you, as well 
as a lot of useful commands. 

Now we can install our dependencies, A-Frame and 
Videogular 2. A-Frame is a WebGL/WebVR framework 
by Mozilla. It uses three.js under the hood, and it’s 
incredibly cool because it enables us to create 3D 


scenes in a declarative way with custom elements. 
On the other hand, Videogular 2 is a video framework 
created by us at Byte Default, and in a similar way, 
we can create a video player declaratively. 

Install these using: 


npm install videogular2 aframe aframe-animation- 
component --save 


Last but not least, we just need to add our fonts and 
JavaScript files to the angular-clijson file. That will 
tell the CLI to handle the files for us. It’s really handy 
because we don’t need to worry about minification, 
concatenation or other processes, the CLI will do the 
magic for us. 


A-Frame allows us 

to create 3D scenes in 
a declarative way with 
custom elements 


ALLOW CUSTOM ELEMENTS 
Before we can start creating our declarative 3D 
scene, we need to let Angular know that some 
custom elements are going to be used. This is 
necessary for A-Frame only, since Videogular 
2 is an Angular library. 

Open app.moduletts and add CUSTOM_ELEMENTS_ 
SCHEMA to the @NgModule decorator and the 
required dependencies for Videogular 2: 


imports: [ 
Mss 
VgCoreModule, 
VgControlsModule 
1, 
schemas: [CUSTOM_ELEMENTS_SCHEMA] 


We'll use VgCoreModule to create a video player and 
VgControlsModule to add a buffering and progress bar 
at the bottom of the screen. 


SET THE SCENE 

Now everything is set up we can start writing a 3D 
scene declaratively with HTML. Open app.component. 
html and add the following code: 


<vg-player> 
<vg-scrub-bar style="bottom: 0;"> 
<vg-scrub-bar-current-time> 
</vg-scrub-bar-current-time> 


> 


% FOCUS ON 


SELECTING 
HARDWARE 


To play a 360 video first we need an equirectangular video, 
which is the common format used by most 360 cameras. 


The range of prices for 360 cameras is pretty big, and obviously 


the quality will also vary a lot. At Byte Default we bought the Ricoh 
Theta S camera. This is a very affordable camera option, which 
comes with two 1920 x 1080 resolution lenses, Wi-Fi and live 
streaming capability. 

You need to understand that when we talk about 360 cameras 
not only the quality of the image matters, but also how many 
lenses you have. If you have only two lenses then you're probably 
going to need to need to stretch the pixels within the image a lot, 
resulting in blurry edges most of the time. 

The main difference between the affordable cameras, semi-pro 
cameras and professional cameras usually is the number of lenses 
each one has. So if you're going to buy one, just remember that 
when you make your choice. 


All-rounder An equirectangular video will be added to a 3D sphere to create the 
360-degree experience 


360 view View of the 360 video player on desktop, without the split view for VR goggles 
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IN-DEPTH 


RESOURCES 


+ Here you can find the libraries that we used, some helpful 
links, as well as a couple of 360 cameras that we consider 
very competitive in terms of price and capabilities. 


Angular 

angular.io 

Angular is a framework by Google that enables users to develop 
apps on mobile, desktop, server-side, loT and more. It's incredibly 
fast and easy to learn. 


Videogular 

github.com/videogular 

Videogular is a framework for developing highly interactive apps 
with Angular (1 and 2). It was created by us at Byte Default. 


A-Frame 

aframe.io 

Developed by Mozilla, A-Frame is a framework for creating VR 
experiences in a declarative way with custom elements. 


A-Frame animation component 
netm.ag/component-292 
An alternative library for creating animations in A-Frame. 


Ricoh Theta S 
theta360.com/en 
This amateur quality camera is pretty impressive. 


360 Fly 
www.360fly.com 


The 360 Fly can shoot at 4K. The demo videos on the website look 
pretty neat — make sure you check them out. 


Component option This component enables you to create animations in A-Frame 
using anime js 
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> 


<vg-scrub-bar-buffering-time></vg-scrub-bar-buffering- 
time> 
</vg-scrub-bar> 


<a-scene vr-mode-ui="enabled: true" embedded> 
<a-assets> 


<video [src]="currentRoom.url" vgMedia id="video" 
preload="auto" crossorigin="anonymous" loop autoplay 
muted></video> 

</a-assets> 


<a-videosphere src="#video"></a-videosphere> 


<a-camera> 
<a-cursor color="#FFFFFF"></a-cursor> 
</a-camera> 
</a-scene> 
</vg-player> 


That’s a lot of new HTML tags, so let’s take a look 

at what each one does. First we have Videogular 2 
custom elements and attributes. Wrapping all the 
code we have vg-player , which will basically find all 
video elements with a vgMedia attribute to get the 
data needed that is being used by other components 
(such as vg-scrub-bar , vg-scrub-bar-current-time and 
vg-scrub-bar-buffering-time ). 

As you may imagine, the A-Frame components 
are all those elements starting with a-. The main 
element is a-scene , which contains all the A-Frame 
elements for our scene. Here is where the mix of 
Angular and A-Frame becomes so interesting. 

For example, we can define our assets inside 
a-assets but also add an Angular binding like we 
have in the video element. 


<video [src]="currentRoom.url" vgMedia id="video" 
preload="auto" crossorigin="anonymous' loop autoplay 
muted></video> 


In this particular case, we’re binding our variable 
currentRoom.url to the src attribute, so if we change 
that value in Angular, the attribute will be updated. 
But most importantly, A-Frame will listen to the 
changes on that video and react accordingly. 

Finally we have some other elements like the 
a-videosphere itself (this is in charge of displaying 
the video in 360-degrees) and the a-cursor , which 
we will use in the next step to move from one 
video to a new one. 


INTRODUCE DOORS 

To finish our virtual tour we obviously need to 
define several places on the tour, and include a way 
to navigate between them. So we’re going to create 


an array of ‘virtual rooms’ inside our app.component.ts 
with as many rooms as we want. 
This is what our ‘Room’ looks like: 


{ 
url: ‘http://static.videogular.com/assets/videos/vr-route-0. 
mp4’, 
doors: [ 
{ position: '-3 2 -10', rotation: '0 0 0’, target: 1 } 
] 
} 


Each room will have a video URL and one or more 
doors that can take us to a new element of the array. 
Now that we have our doors defined we want to 
display them in our scene. To do that we’re going 

to add an alpha image like the ring that appears in 
the distance in the image on the right. Let’s then add 
this image to our a-assets element. 


<img id="ringImg" src="assets/ring1.png" width="512" 
height="512"> 


The animation needs 
to pause a couple of 
seconds when the 
viewer enters a door 


Now we want to create one or more doors depending 
on the selected room, and navigate between rooms 
when we interact with a door. 

Let’s add this element to our a-scene element. 


<a-image 
*ngFor="let door of currentRoom.doors; let izindex" 
[attr.depth]="100 + i" 
[attr.position]="door.position" 
[attr.rotation]="door.rotation" 
src="#ringlmg" 
scale="1 11" 
(mouseenter)="onMouseEnter($event, door)" 


(mouseleave)="onMouseLeave($event)" 
animation__scale="startEvents: vgStartAnimation; 
pauseEvents: vgPauseAnimation; property: scale; dur: 2000; 
from: 1 1 1; to: 222"> 
</a-image> 


Again we have a really interesting combination 
of Angular and A-Frame. The element a-image 
allows us to create a 3D element from one image 
defined in our a-assets — in this case #ringlmg . 
Each door is created thanks to the Angular *ngFor 


from the currentRoom selected. Other attributes 
such as the position and rotation are set also by an 
Angular binding. 


Hidden doorway The ring 
in the distance of the scene 
indicates a ‘door’ the viewer 
can walk through 


ADJUST THE TRANSITIONS 

We added a scale animation via animation__scale. 
This makes the animation pause for a couple of 
seconds when the viewer enters a door, giving a 
better impression of what is going to happen — we 
don’t want the scene to instantly swap over as the 
viewer goes from one room to another. 

Finally, we can add the onMouseEnter function to 
move between rooms and the onMouseLeave function 
to reset the animation in case the user looks out of 
the door: 


onMouseEnter($event: any, door: Door) { 
¢event.target.dispatchEvent(new CustomEvent('vgStartAn 
imation’); 
this.timeout = TimerObservable.create(2000).subscribe( 
() => { 
this.currentRoom = this.rooms[ door.target ]; 
} 
); 
} 
onMouseLeave($event: any) { 
¢event.target.dispatchEvent(new CustomEvent(‘vgStartAn 
imation’); 
¢event.target.dispatchEvent(new CustomEvent('vgPauseA 
nimation’)); 
this.timeout.unsubscribe(); 


} 


And just like that, we can start our virtual tour. The 
360-degree video opens up a new way to consume 
media. It’s easy to see how this could be useful 

for museums (we could put our visitors in a 15th 
century village), or for tourist routes (by displaying 
information about the place), as well as obviously for 
epic entertainment in movies and games. BY 


net may 2017 111 


HOSTING PARTNERS | 


To advertise here, contact our sales team: +44 01225 68 7832 chris.mitchell@futurenet.com 


FEATURED HOST 


As one of 
the world’s 
leading web 
hosting 
providers, 
1&1 allows customers to build 
and promote their websites 
and be successful online. With 
an extensive product portfolio 
including hosting, cloud and 
email applications, tailored to 


registration to website building 
tools, advanced ecommerce 
solutions, powerful cloud 
servers and more. 

Founded in 1988, the company 
is active in ten countries with 
more than 7,000 employees 
worldwide. Experts, developers, 
small companies, freelancers 
and other users are provided 
with cutting-edge technology, 


the needs of SMBs, 1&1 offers 
everything from simple domain 


EXPERT TIPS” 

What features are unlimited? 

It’s important to check that your hosting provider does 
not charge extra for performance features like traffic. 

Selected 1&1 packages come with unlimited webspace, 

websites, databases, traffic and more. 


security features and round-the- 
clock expert support. 


Is your data secure? 

Security is of utmost importance when choosing a 
hosting provider. With 1&1, customers can rely on 
maximum security and availability thanks to parallel 
operation in physically separate data centres. 


What tools are provided? 

Select a platform that provides the ideal functionality 
for your online projects. 1&1 hosting packages 

feature one-click apps such as WordPress for quick 
and easy websites. 


Is your domain included? 

When considering hosting options, you should look out 
for providers that offer a free domain. 1&1 includes a 
domain with selected products — free for the first year of 
your contract. 


Is your website fast? 

Nowadays websites are expected to be available 24/7. To 
keep visitors on their website, website owners have to 
consider sufficient performance tiers in order to provide 
fast loading times. 


CONTACT 
0333 336 9909 


WWW.1AND1.C0.UK 


WHAT 1AND1 OFFERS 


® Quick and easy domain registration covering a wide range 
of extensions 


@ All-inclusive website builder, web hosting and WordPress 
packages with powerful features and maximum flexibility 


@ High-performance dedicated, managed and cloud servers 
which cover all business needs 


@ Professional eCommerce solutions for creating eShops and 
selling successfully online 


2020MEDIA 


2020Media is small enough to care, large enough to cope. 

Free site migration from any host and 12 months managed 
WordPress is included with all WordPress hosting plans. The firm 
is known for its knowledgeable, excellent service to agencies, 
designers, developers and small businesses across the UK. 


i, 2020Media 
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0800 035 6364 
WWW. 2020MEDIA.COM 
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NETCETERA 


Netcetera provides hosting from one of Europe’s most energy- 
efficient data centres. It offers everything from reliable low- 
cost hosting for single sites through to complex cloud, racks and 
managed IT solutions. Netcetera has a large portfolio of green, 
zero-carbon solutions for businesses of all sizes. 


0800 808 5450 
WWW.NETCETERA.CO.UK 


netcetera 


CYBER HOST PRO 


Cyber Host Pro has been providing UK web hosting services 

for over 15 years. It offers superfast SSD, high-bandwidth web 
hosting, and is optimised for WordPress. Visit the website to view 
the website hosting, reseller hosting, cloud and dedicated servers 
— plus get a 20 per cent discount for life (code: NETMAGLIFE). 


0845 527 9345 
WWW.CYBERHOSTPRO.COM Coiocvsernosten 
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CATALYST2 


As one of the UK’s most experienced hosting companies, 
Catalyst2 has built a stable, reliable and well-supported 
hosting platform for organisations across the UK. Catalyst2 
specialises in very high-availability hosting and exceptional 
customer support. Contact the team today for a quote. 


catalyst2 


0800 107 79 79 
SALES@CATALYST2.COM 
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giving you complete peace of mind 
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HEART INTERNET 


As one of the UK’s leading web hosting authorities, Heart 
Internet focuses on designers, developers and technically 
adept businesses. It builds on our four tenets — speed, reliability, 
support, and security — to create award-winning solutions for 
over 500,000 customers. 


+l. (0) 330 660 0255 -leartinternet 
WWW.HEARTINTERNET. UK 
— . a= 
Heart Internet 


Your websites deserve 
great web hosting 


ADVERTISE HERE! 


Would you like to promote your hosting business 
and services to our audience of professional web 
designers and developers? If so, please call or email 
Chris as below. 


REASONS TO ADVERTISE 


@ Reach professionals: 75 per cent of readers are working in 
or seeking work in the web industry 

@ Variety of projects: Future projects include mobile apps, 
web apps and CMS-driven sites 

@ Home workers: 51 per cent have a personal website 
under development 


CONTACT 
+44 01225 687832 / CHRIS. MITCHELL@FUTURENET.COM 
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PUTTING PEOPLE FIRST 


Sarah Horton says that we are hooked on the convenience 
of technology, but at what cost? 


I was designing websites in the first days of the 

web and was around for the birth of 
eCommerce. I remember being incredulous when 
Amazon launched. Who in their right mind would 
submit their credit card information on a web form? 
Over time, I have come to value the convenience of 
online shopping so much that I happily click the 
‘Save my credit card information’ checkbox. 

Over time technology has proven itself as a vehicle 
for convenience. Tech companies understand that 
we will tolerate a good deal of bother and intrusion 
for the sake of convenience. I remember when Gmail 
launched, feeling invaded by ads that appeared 
alongside my personal emails. In time, I accepted 
advertising as the price to pay for free software. 

In the last year or so, the implications of our 
technology addiction have become more visible. 
After the 2016 US presidential election, Om Malik 
wrote a New Yorker article, ‘Silicon Valley Has an 
Empathy Vacuum’. Reflecting on the influence of 
technology, he observed within the tech industry a 
“lack of empathy for those whose lives are disturbed 
by its technological wizardry”. 

Given the pressures to succeed, Malik noted in 
the article, “It’s hard to think about the human 
consequences of technology as a founder of a startup 
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racing to prove itself or as a chief executive who is 
worried about achieving the incessant growth that 
keeps investors happy.” 

Pair the tech industry’s race to succeed with an 
addicted consumer base, and we pay the price of 
convenience through dark patterns, edge cases, data 
exploitation, trolls, doxxing and fake news. 

It’s time to reset, and make caring for people a first 
principle in product design. 

First principles are the fundamental truths upon 
which we make decisions. Elon Musk popularised 
first-principles thinking for creativity and 
technology innovation. By starting from what we are 
sure is true and can’t be changed, we make better 
design decisions. 

Iam fortunate to work in an area of technology 
that is often considered an ‘edge case’. Accessibility 
is about making technology work for people with 
disabilities. Through user research, I learn how 
enabling, disabling or downright painful technology 
can be, depending on whether it was designed with 
accessibility in mind. These insights allow me to see 
a clear path to humane design solutions. 

As a designer, one thing I am sure is true: people 
matter more than profits. Let’s put people first, solve 
for edge cases, keep people safe and stop exploiting. 9 


Sarah is user experience strategy lead for 
The Paciello Group and coauthor of A Web for 
Everyone and Web Style Guide. 


Sell anything. No limits. WooCommerce is a customizable 
eCommerce platform, built on WordPress. From physical 
products to accommodation, appointments to subscriptions, 
memberships to tickets and digital downloads, build a 
solution as unique as your business. 


Ready to #shipyouridea? 
Visit WooCommerce.com/creativeblog 


ENTER 'CREATIVEBLOG’ AT CHECKOUT ON WOOCOMMERCE.COM FOR 25% OFF 
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+ 30 DAY MONEY BACK 
GUARANTEE 


SIGN UP AT 
20i.com/dotnet 
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Reseller Web Hosting ona 
100% SSD, Autoscaling Cloud 
Hosting Platform. 
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UNLIMITED HOSTING EASY MIGRATION 


Move your domains, websites, email 
and databases easily with our 
automated one-stop 
migration centre. 


Includes unlimited SSD web space, 
bandwidth, websites, user accounts, 
1GB MySQL databases, 10GB 
mailboxes and free SSL certificates. 


SSD AS STANDARD 
We only fit top of the range 
solid-state drives in our servers to 


ensure blazing fast speeds and 
exceptional reliability. 


UNIQUE TO 20i 


AUTOSCALING 


Our platforms scale resources on 
demand to ensure your website 
stays online and fast, even during the 
busiest times. 


100% BRANDABLE 


Give your customers their own 
customised control panel. It’s 
sleek, packed with features, and 
user-friendly. 


MULTIPLE PLATFORMS 


A) Host websites on performance-tuned 
QO = Linux, Windows and WordPress 


optimised platforms. 


VISIT US EMAIL US CALL US 


201 .com/dotnet  sales@20icom 0333 344 2733 


